页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

iziModal-时尚炫酷的jQuery模态窗口插件

iziModal是一款时尚炫酷的jQuery模态窗口插件。该模态窗口插件提供基本的打开模态窗口动画特效,并且可以调用iframe内容,Ajax加载,制作alert效果,加载超大内容等,窗口倒计进度条窗口效果。

iziModal-时尚炫酷的jQuery模态窗口插件

$("#modal").iziModal({
    title: '',
    subtitle: '',
    headerColor: '#88A0B9',
    theme: '',  // light
    attached: '', // bottom, top
    icon: null,
    iconText: null,
    iconColor: '',
    rtl: false,
    width: 600,
    padding: 0,
    radius: 3,
    zindex: 999,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    focusInput: true,
    group: '',
    loop: false,
    navigateCaption: true,
    navigateArrows: true, // closeToModal, closeScreenEdge
    history: true,
    restoreDefaultContent: false,
    autoOpen: 0, // Boolean, Number
    bodyOverflow: false,
    fullscreen: false,
    openFullscreen: false,
    closeOnEscape: true,
    overlay: true,
    overlayClose: true,
    overlayColor: 'rgba(0, 0, 0, 0.4)',
    timeout: false,
    timeoutProgressbar: false,
    pauseOnHover: false,
    timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
    transitionIn: 'comingIn',
    transitionOut: 'comingOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onFullscreen: function(){},
    onResize: function(){},
    onOpening: function(){},
    onOpened: function(){},
    onClosing: function(){},
    onClosed: function(){}
});

Argument Default Value Description
title '' Title that appears in the modal header.
subtitle '' Caption that appears in the header below the title.
headerColor '#6d7d8d' Color to fill the header background, will also be applied to the bottom edge of the modal.
theme '' Theme of the modal, can be empty or "light".
attached '' Attach the modal at the top or bottom of the screen.
icon null Icon class (font-icon of your choice) that will be displayed in modal header.
iconText null Icon text (font-icon using text) that will be displayed in modal header.
iconColor '' Color of the header icon.
rtl false Right To Left option.
width 600 Fixed width of the modal. You can use %, px, em or cm. If not using an unit of measure. It will be taken over the px unit.
padding 0 Margin that will be applied to the inside of the modal.
radius 3 Border-radius that will be applied in modal.
zindex 999 The z-index CSS attribute of the modal.
iframe false Set true to apply an iframe inside the modal.
iframeHeight null Fixed height of the iframe.
iframeURL null Address that will open in the iframe inside the modal, if not set, the user can alternatively use the href link responsible for opening it.
focusInput true If set true, whenever you open a modal, the first visible field is active.
group '' Create a group with everyone who has the same name, so can navigate between them.
loop false It allows loop with modals of the same group.
navigateCaption true Show arrows to inform possible navigation.
navigateArrows true Change the layout which displays the arrows to navigate between the modals. Can be: 'closeToModal' or 'closeScreenEdge'.
history true Enable browsing history.
restoreDefaultContent false Makes return the default modal content to be open again.
autoOpen 0 or false If set true, the modal opens automatically without any user action.
bodyOverflow false Forcing overflow hidden in the document when opening the modal, closing the modal, overflow will be restored.
fullscreen false Allow button in header modal to expand.
openFullscreen false Force to open modal in fullscreen.
closeOnEscape true If set true, you can close the modal only pressing the escape key.
overlay true Enable or disable background overlay.
overlayClose true If set true, you can close the modal just by clicking on the outer layer of dark modal.
overlayColor 'rgba(0,0,0,0.4)' Color overlay.
timeout 0 or false Amount in milliseconds to close the modal or false to disable.
timeoutProgressbar false Enable progress bar of timeout.
timeoutProgressbarColor 'rgba(255,255,255,0.5)' Progress bar color.
pauseOnHover false It allows the timeout is paused when the cursor is on the modal.
transitionIn 'comingI'n Modal opening default transition.
transitionOut 'comingOut' Modal closing default transition.
transitionInOverlay 'fadeIn' Default transition of overlay opening.
transitionOutOverlay 'fadeOut' Default transition of overlay closure.
onFullscreen function() {} Callback function that will run when the modal enable or disable full screen.
onResize function() {} Callback function that will be executed when a resize occurs.
onOpening function() {} Callback function that will run when opening the modal.
onOpened function() {} Callback function that will run when the modal is open.
onClosing function() {} Callback function that will run when closing the modal.
onClosed function() {} Callback function that will run when the modal is closed.

Methods

  • Instantiating - Catching instance of modal
var modal = $('#modal').iziModal(); // then you can use: // modal.iziModal('open');
  • Open - Opens the modal window.
$('#modal').iziModal('open'); // or with a specific transition of entry. $('#modal').iziModal('open', {
    transition: 'fadeInDown' // Here transitionIn is the same property. }); // or with a specific transition of entry and output. $('#modal').iziModal('open', {
    transitionIn: 'bounceInDown' transitionOut: 'bounceOutDown' // TransitionOut will be applied if you have any open modal. });
  • Close - Closes the modal window.
$('#modal').iziModal('close'); // or with a specific transition of output. $('#modal').iziModal('close', {
    transition: 'bounceOutDown' // Here transitionOut is the same property. });
  • Toggle - Change to the opposite of the current state.
$('#modal').iziModal('toggle');
  • getState - Returns a current state of the modal.
/**  * @returns {'closed'|'closing'|'opened'|'opening'}  */ $('#modal').iziModal('getState');
  • getGroup - Returns group information.
$('#modal').iziModal('getGroup');
  • setGroup - Set a new group name.
$('#modal').iziModal('setGroup', 'alerts');
  • Next - Skip to next modal to the same group.
$('#modal').iziModal('next'); // or with a specific transition of output. $('#modal').iziModal('next' ,{
    transitionIn: 'bounceInDown' transitionOut: 'bounceOutDown' });
  • Prev - Skip to previous modal to the same group.
$('#modal').iziModal('prev'); // or with a specific transition of output. $('#modal').iziModal('prev' ,{
    transitionIn: 'bounceInDown' transitionOut: 'bounceOutDown' });
  • startLoading - Start overlay loading within the modal.
$('#modal').iziModal('startLoading');
  • stopLoading - Stop overlay loading within the modal.
$('#modal').iziModal('stopLoading');
  • Destroy - Destroys the modal instance.
$('#modal').iziModal('destroy');
  • setHeaderColor - Apply the background color in modal header.
$('#modal').iziModal('setHeaderColor', 'color');
  • setTitle - Change the title of the modal.
$('#modal').iziModal('setTitle', 'Title');
  • setSubtitle - Change the subtitle of the modal.
$('#modal').iziModal('setSubtitle', 'Subtitle');
  • setIcon - Change the class of icon.
$('#modal').iziModal('setIcon', 'icon-home');
  • setIconText - Change the text of font icon.
$('#modal').iziModal('setIconText', 'icon');
  • setZindex - Change the z-index CSS attribute of the modal.
$('#modal').iziModal('setZindex', 999);
  • setTransitionIn - Change the Modal opening transition.
$('#modal').iziModal('setTransitionIn', 'comingIn'); // comingIn, bounceInDown, bounceInUp, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
  • setTransitionOut - Change the Modal closing transition.
$('#modal').iziModal('setTransitionOut', 'comingOut'); // comingOut, bounceOutDown, bounceOutUp, fadeOutDown, fadeOutUp, , fadeOutLeft, fadeOutRight, flipOutX
  • recalculateLayout - Used to recalculate the placement and dimensions of the modal layout.
$('#modal').iziModal('recalculateLayout');

Events

  • Opening - Capture when the modal is opening.
$(document).on('opening', '#modal', function (e) { //console.log('Modal is opening'); });
  • Opened - Capture when the modal is open.
$(document).on('opened', '#modal', function (e) { //console.log('Modal is opened'); });
  • Closing - Capture when the modal is closing.
$(document).on('closing', '#modal', function (e) { //console.log('Modal is closing'); });
  • Closed - Capture when the modal is closed.
$(document).on('closed', '#modal', function (e) { // console.log('Modal is closed'); });
  • Fullscreen - Capture when the modal enables or disables the full screen.
$(document).on('fullscreen', '#modal-default', function (e, modal) { if(modal.isFullscreen){ // Enabled } else { // Disabled }
});
  • iziModal-group-change - Capture when a modal opens and closes within a group.
$(document).on('iziModal-group-change', function (e, modal) { console.info(modal.in); // Modal that came in. console.info(modal.out); // Modal that came out. });

相关链接

发表评论