iziModal-時尚炫酷的jQuery模態(tài)窗口插件

插件描述：iziModal是一款時尚炫酷的jQuery模態(tài)窗口插件。該模態(tài)窗口插件提供基本的打開模態(tài)窗口動畫特效，并且可以調(diào)用iframe內(nèi)容，Ajax加載，制作alert效果，加載超大內(nèi)容等。

使用方法

在頁面中引入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結(jié)構(gòu)

可以通過按鈕或<a>元素來觸發(fā)一個模態(tài)窗口。

<!-- Trigger to open Modal -->
<a href="#" class="trigger">打開模態(tài)窗口</a>
<!-- 模態(tài)窗口 -->
<div id="modal">
    <!-- 模態(tài)窗口的內(nèi)容 -->
</div>

初始化插件

在頁面DOM元素加載完畢之后，可以通過iziModal()方法來初始化該模態(tài)窗口插件。

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

或者也可以通過jqurey事件來打開模態(tài)窗口。

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

Iframe

要在模態(tài)窗口中使用iframe功能，結(jié)構(gòu)如下：

<a href="http://www.jq22.com" class="trigger">打開模態(tài)窗口</a>

初始化：

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

或者也可以通過jquery事件來打開模態(tài)窗口。

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

Ajax

iziModal模態(tài)窗口插件配置有Ajax功能。

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

配置參數(shù)

iziModal模態(tài)窗口插件的默認(rèn)配置參數(shù)如下：

$("#modal").iziModal({
    title: "",
    subtitle: "",
    theme: "",
    headerColor: "#88A0B9",
    overlayColor: "rgba(0, 0, 0, 0.4)",
    iconColor: "",
    iconClass: null,
    width: 600,
    padding: 0,
    iframe: false,
    iframeHeight: 400,
    iframeURL: null,
    overlayClose: true,
    closeOnEscape: true,
    bodyOverflow: false,
    focusInput: true,
    autoOpen: false,
    transitionInModal: 'transitionIn',
    transitionOutModal: 'transitionOut',
    transitionInOverlay: 'fadeIn',
    transitionOutOverlay: 'fadeOut',
    onOpening: function() {},
    onOpened: function() {},
    onClosing: function() {},
    onClosed: function() {}
});

方法

• $('#modal').iziModal();//初始化模態(tài)窗口。

• $('#modal').iziModal('open');//打開模態(tài)窗口。

• $('#modal').iziModal('close');//關(guān)閉模態(tài)窗口。

• $('#modal').iziModal('getState');//獲取模態(tài)窗口的狀態(tài)，返回：{'closed'|'closing'|'opened'|'opening'}。

• $('#modal').iziModal('startLoading');//開啟模態(tài)窗口中的加載進(jìn)度指示器。

• $('#modal').iziModal('stopLoading');//關(guān)閉模態(tài)窗口中的加載進(jìn)度指示器。

• $('#modal').iziModal('destroy');//銷毀模態(tài)窗口。

• $('#modal').iziModal('setHeaderColor', 'color');//設(shè)置模態(tài)窗口頭部的背景顏色。

• $('#modal').iziModal('setTitle', 'Title');//設(shè)置模態(tài)窗口的標(biāo)題。

• $('#modal').iziModal('setSubtitle', 'Subtitle');//設(shè)置模態(tài)窗口的子標(biāo)題。

• $('#modal').iziModal('setIconClass', 'iconClass');//設(shè)置模態(tài)窗口的圖標(biāo)。

• $('#modal').iziModal('recalculateLayout');//重新計算模態(tài)窗口的尺寸和位置。

事件

Opening：在模態(tài)窗口打開時觸發(fā)。

$(document).on('opening', '#modal', function (e) {
    //console.log('Modal is opening');
});

Opened：在模態(tài)窗口打開之后觸發(fā)。

$(document).on('opened', '#modal', function (e) {
    //console.log('Modal is opened');
});

Closing：在模態(tài)窗口關(guān)閉時觸發(fā)。

$(document).on('closing', '#modal', function (e) {
    //console.log('Modal is closing');
});

Closed：在模態(tài)窗口關(guān)閉之后觸發(fā)。

$(document).on('closed', '#modal', function (e) {
    // console.log('Modal is closed');
});