人靠衣装,机靠壳装

iziModal时尚的模态弹出窗口动画特效代码

2016-07-11 10:55 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

df8edf4b78.jpg

提供基本的打开模态窗口动画特效,并且可以调用iframe内容,Ajax加载,制作alert效果,加载超大内容等。


参数默认值描述
title""模态窗口的标题。
subtitle""模态窗口的子标题。
theme""模态窗口的主题,可以是空或"light"。
headerColor#6d7d8d模态窗口的头部颜色。
overlayColorrgba(0,0,0,0.4)遮罩层的颜色。
iconColor""头部图标的颜色。
iconClassnull图标图标的class(你使用的字体图标的class名称)
width600模态窗口的固定宽度。你可以使用%, px, em 或 cm。如果不带单位,默认为像素。
padding0模态窗口的内边距。
iframefalse是否在模态窗口中启用iframe功能。
iframeHeightnulliframe的高度。
iframeURLnulliframe加载内容的URL地址。如果没有设置,可以使用超链接的地址来作为URL地址。
overlayClosetrue是否允许点击模态窗口的外部来关闭模态窗口。
closeOnEscapetrue是否允许通过点击ESC键来关闭模态窗口。
bodyOverflowfalse强制在打开模态窗口时超出文档的内容被隐藏。
focusInputtrue设置为true时,当打开模态窗口时,第一个可见的表单域将被激活。
autoOpenfalse是否自动打开模态窗口。
transitionInModaltransitionIn打开模态窗口的默认过渡动画。
transitionOutModaltransitionOut关闭模态窗口的默认过渡动画。
transitionInOverlayfadeIn遮罩层打开时的过渡动画。
transitionOutOverlayfadeOut遮罩层关闭时的过渡动画。
onOpeningfunction() {}模态窗口打开时的回调函数。
onOpenedfunction() {}模态窗口打开后的回调函数。
onClosingfunction() {}模态窗口关闭时的回调函数。
onClosedfunction() {}模态窗口关闭后的回调函数。

 方法

  • $('#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');
});


iziModal模态窗口插件的

github地址为:https://github.com/dolce/iziModal

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码