iziModal-时尚炫酷的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.jq22.com" class="trigger">打开模态窗口</a>初始化：
$("#modal").iziModal({
iframe: true,
iframeHeight: 800,
iframeURL: "http://www.jq22.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: "",
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() {}
});| 参数 | 默认值 | 描述 |
| title | "" | 模态窗口的标题。 |
| subtitle | "" | 模态窗口的子标题。 |
| theme | "" | 模态窗口的主题，可以是空或"light"。 |
| headerColor | #6d7d8d | 模态窗口的头部颜色。 |
| overlayColor | rgba(0,0,0,0.4) | 遮罩层的颜色。 |
| iconColor | "" | 头部图标的颜色。 |
| iconClass | null | 图标图标的class（你使用的字体图标的class名称） |
| width | 600 | 模态窗口的固定宽度。你可以使用%, px, em 或 cm。如果不带单位，默认为像素。 |
| padding | 0 | 模态窗口的内边距。 |
| iframe | false | 是否在模态窗口中启用iframe功能。 |
| iframeHeight | null | iframe的高度。 |
| iframeURL | null | iframe加载内容的URL地址。如果没有设置，可以使用超链接的地址来作为URL地址。 |
| overlayClose | true | 是否允许点击模态窗口的外部来关闭模态窗口。 |
| closeOnEscape | true | 是否允许通过点击ESC键来关闭模态窗口。 |
| bodyOverflow | false | 强制在打开模态窗口时超出文档的内容被隐藏。 |
| focusInput | true | 设置为true时，当打开模态窗口时，第一个可见的表单域将被激活。 |
| autoOpen | false | 是否自动打开模态窗口。 |
| transitionInModal | transitionIn | 打开模态窗口的默认过渡动画。 |
| transitionOutModal | transitionOut | 关闭模态窗口的默认过渡动画。 |
| transitionInOverlay | fadeIn | 遮罩层打开时的过渡动画。 |
| transitionOutOverlay | fadeOut | 遮罩层关闭时的过渡动画。 |
| 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：在模态窗口打开时触发。
$(document).on('opening', '#modal', function (e) {
//console.log('Modal is opening');
});Opened：在模态窗口打开之后触发。
$(document).on('opened', '#modal', function (e) {
//console.log('Modal is opened');
});Closing：在模态窗口关闭时触发。
$(document).on('closing', '#modal', function (e) {
//console.log('Modal is closing');
});Closed：在模态窗口关闭之后触发。
$(document).on('closed', '#modal', function (e) {
// console.log('Modal is closed');
});