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

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

 使用方法

在页面中引入iziModal.min.css和jquery、iziModal.min.js文件。

<link rel="stylesheet" href="iziModal.min.css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="iziModal.min.js" type="text/javascript"></script>

 HTML结构

可以通过按钮或<a>元素来触发一个模态窗口。

<!-- Trigger to open Modal -->
<a href="#" class="trigger">打开模态窗口</a>
<!-- 模态窗口 -->
<div id="modal">
    <!-- 模态窗口的内容 -->
</div>

 初始化插件

在页面DOM元素加载完毕之后，可以通过iziModal()方法来初始化该模态窗口插件。

$("#modal").iziModal();

或者也可以通过jqurey事件来打开模态窗口。

$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); // 需要带上 "this"
});

 Iframe

要在模态窗口中使用iframe功能，结构如下：

<a href="http://www.htmleaf.com" class="trigger">打开模态窗口</a>

初始化：

$("#modal").iziModal({
    iframe: true,
    iframeHeight: 800,
    iframeURL: "http://www.htmleaf.com"
});

或者也可以通过jquery事件来打开模态窗口。

$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    $('#modal').iziModal('open', this); // 需要带上 "this"
});

 Ajax

iziModal模态窗口插件配置有Ajax功能。

$("#modal").iziModal('open', function(modal){
    modal.startLoading();
    $.get('/path/to/file', function(data) {
        $("#modal .iziModal-content").html(data);
        modal.stopLoading();
    });
});

 配置参数

iziModal模态窗口插件的默认配置参数如下：

$("#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(){}
});

 方法

• $('#modal').iziModal();：初始化模态窗口。

• $('#modal').iziModal('open');：打开模态窗口。

• $('#modal').iziModal('close');：关闭模态窗口。

• $('#modal').iziModal('getState');：获取模态窗口的状态，返回：{'closed'|'closing'|'opened'|'opening'}。

• $('#modal').iziModal('startLoading');：开启模态窗口中的加载进度指示器。

• $('#modal').iziModal('stopLoading');：关闭模态窗口中的加载进度指示器。

• $('#modal').iziModal('destroy');：销毁模态窗口。

• $('#modal').iziModal('setHeaderColor', 'color');：设置模态窗口头部的背景颜色。

• $('#modal').iziModal('setTitle', 'Title');：设置模态窗口的标题。

• $('#modal').iziModal('setSubtitle', 'Subtitle');：设置模态窗口的子标题。

• $('#modal').iziModal('setIconClass', 'iconClass');：设置模态窗口的图标。

• $('#modal').iziModal('recalculateLayout');：重新计算模态窗口的尺寸和位置。

 事件

• Opening：在模态窗口打开时触发。
  

• Opened：在模态窗口打开之后触发。
  

• Closing：在模态窗口关闭时触发。
  

• Closed：在模态窗口关闭之后触发。
  

iziModal模态窗口插件的github地址为：https://github.com/dolce/iziModal。

随着版本的更新，使用语法也有部分细节上的调整，具体使用可参考官网代码演示