UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

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

所属分类：UI-对话框,弹出层

 57187  538  查看评论 (27)
分享到微信朋友圈
X
iziModal-时尚炫酷的jQuery模态窗口插件 ie兼容10
 查看演示  website  立即下载

使用方法

在页面中引入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模态窗口的头部颜色。
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');
});


相关插件-对话框,弹出层
查看更多

讨论这个项目（27）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    拓展河马 0
    2019/9/4 10:04:40
    我也遇到一个很奇葩的问题，在使用的时候，在PC端不论啥浏览器都打不开，手机上没有问题。

    大侠们能指条路吗？ 回复
    木易 0
    2018/8/25 10:39:13
    发现一个奇怪的bug，在使用的时候，A标签里的如果是图片的话，地址是传递不到里面去的，必须标签里包含文字
        木易0
        2018/8/25 10:40:39
        同时包含的时候还只能点击文字！！！求解决办法！！！
    回复
    Tempest_ 0
    2018/5/4 14:41:49
    在模态框上展示ajax获取的列表，列表不可点击，触发不到，怎么回事 回复
    xoaxoa22 0
    2018/5/4 2:12:55
    URL: 变量a,指定之后,即时a改变了,但是每次弹窗都是弹出第一次的内容,有什么办法解决嘛? 回复
    №潇洒★宇 0
    2017/11/11 19:16:43
    弹出一次关闭后再次open，这个时候不能通过点击区域外来关闭了。
        All or nothing0
        2017/11/22 14:17:10

        是的  我也刚刚碰到这个问题，请问是否找到解决方案

        All or nothing1
        2017/11/22 14:39:47

        在js  手动添加一个 即可取消

        $(document).on('click','.iziModal-overlay',function(){
     $('#editJurisdiction').iziModal('close')
})

        不够美观，源码在open之后 点击事件无法触发，应该可以改源码的

    回复
    SiriBen 0
    2017/1/6 15:01:43

    BUG：手机端iframe没有滚动，显示不完iframe中的内容

    回复
    T.X.T²º¹④ 0
    2017/1/5 11:01:38

    iframe 链接只能是纯文字，不然读不到！

    回复
    百年孤寂 0
    2016/12/16 10:12:01

    您好，两个模态框，相互无缝切换，结果两个模态框都会消失。

        Aitex 0
        2019/11/22 11:53:15
        解决了吗
        Aitex 1
        2019/11/22 14:06:11

        关闭时，标记关闭的哪一个模态窗，达到精准关闭

        $(document).on('click', '.trigger-', function(event) {
    event.preventDefault();
    click_type = 0;
    $("#modal-").iziModal('open', event);

});

$(document).on('click', '.trigger-_2', function(event) {
    event.preventDefault();
    //$('#modal-').trigger('izi.open', this);
    click_type = 1;
    $("#modal-_2").iziModal('open', event);

});
$(document).on('click', '.iziModal-overlay', function() {
    if (click_type == 0) {
        $('#modal-').iziModal('close');
    } else {
        $('#modal-_2').iziModal('close');
    }
})
    回复
    xo 0
    2016/10/18 18:10:03
    发现一个严重的bug,弹出一次关闭后再次open，这个时候不能通过点击区域外来关闭了。
        pukyy0
        2016/12/8 13:12:59
        请问您这个bug解决了吗？
    回复
    漫步 0
    2016/10/17 16:10:00
    有没有办法通过弹出的iframe里中包含的页面中的按钮关闭模态窗口啊？
        Jay-顾1
        2016/11/19 9:11:34

        可以在原页面写个关闭方法,弹出页面的关闭按钮执行这个方法

        window.parent.close();
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复