iziModal-时尚炫酷的jQuery模态窗口插件-特效详细页-国内领先的前端外包切图网站-切客网(qkhtml.com)

在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

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

分类:弹出层 更新时间:2016-07-29 浏览次数:2252

代码简介

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

浏览器兼容

兼容:Chrome,Opera,Firefox,Safari,IE10+

使用方法

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

="stylesheet" href="iziModal.min.css">
="jquery.min.js" type="text/javascript"></script>

="iziModal.min.js" type="text/javascript"></script>


可以通过按钮或元素来触发一个模态窗口。

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

方法

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


问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!