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

2019独角兽企业重金招聘Python工程师标准>>>

http://www.jq22.com/jquery-info8627

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

使用方法

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

1 2 3

<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>元素来触发一个模态窗口。

1 2 3 4 5 6

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

初始化插件

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

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

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

1 2 3 4

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

Iframe

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

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

初始化：

1 2 3 4 5

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

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

1 2 3 4

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

Ajax

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

1 2 3 4 5 6 7 8 9 10 11

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

配置参数

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

$("#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：在模态窗口打开时触发。

1 2 3

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

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

1 2 3

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

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

1 2 3

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

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

1 2 3

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

 

 

演示：

http://www.jq22.com/yanshi8627 

转载于:https://my.oschina.net/u/2009816/blog/876611