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

iziModal-时尚炫酷的jQuery模态窗⼜插件 查看演⽰ website 下载地址：https://github .com/dolce/iziModal 插件描述：iziModal是⼀款时尚炫酷的j Query模态窗⼜插件。该模态窗⼜ 插件提供基本的 开模态窗⼜动画特效，并且可以调⽤iframe 内容，Aj ax 加载，制作alert效果，加载超⼤内容等。 使⽤⽅法 在页⾯中引⼊iziModal .min .css和jquery 、iziModal .min .j s⽂件。 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 . class=trigger打开模态窗⼝/a 初始化： $(#modal).iziModal({ iframe: true, iframeHeight: 800, iframeURL: http://www . }); 或者也可以通过jquery事件来 开模态窗⼜。 $(document).on(click, .trigger, function (event) { event.preventDefault(); $(#modal).iziModal(open, this); // 需要带上 this }); Ajax iziModal模态窗⼜插件配置有Aj ax功能。 $(#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, transition