iziModal.js是一款基于jquery的弹出层模态窗口插件

iziModal.js是一款基于jquery的弹出层模态窗口插件。

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

使用方法

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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/iziModal.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/iziModal.min.css">

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.bfw.wiki" class="trigger">打开模态窗口</a>

初始化：

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

或者也可以通过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 模态窗口的头部颜色。
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：在模态窗口打开时触发。

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

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/iziModal.min.css">

    <style>
        .button {
          display: inline-block;
          margin: 20px;
          padding: 10px 20px;
          background:#fff;
          border:1px #333 solid;
          font-size:14px;
          color:#333;
        }
        a {
          font-size:14px;
          color:#333;
          text-decoration:none;
        }
        .close {
          text-align:right;
          padding: 10px;
        }
        p {
          padding: 20px;
          line-height:1.6;
        }
        video {
          width:100%;
          height:auto;
        }
    </style>




</head>

<body>
    <p>弹出层提示框</p>
    <button class="open-default button">default</button>
    <div id="modal-default">
        <div class="close">
            <a data-izimodal-close="">×</a>
        </div>
        <p>这是默认的，只有一个关闭按钮</p>
    </div>

    <button class="open-options button">options</button>
    <div id="modal-options" data-izimodal-group="group1" data-izimodal-loop="" data-izimodal-title="这是设置选项的" data-izimodal-subtitle="子标题">
        <p>这个可以设置分组，通过左右切换键来切换内容<br>这个与下一个iframe打开是一个分组</p>
    </div>

    <button class="open-iframe button">iframe</button>
    <div id="modal-iframe" data-izimodal-group="group1"></div>

    <button class="open-alert button">alert</button>
    <div id="modal-alert" data-izimodal-title="您好" data-izimodal-subtitle="10秒后自动关闭"></div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/iziModal.min.js"></script>
    <script>
        //default
        $(document).on('click', '.open-default', function (event) {
          event.preventDefault();
          $('#modal-default').iziModal('open');
        });
        $('#modal-default').iziModal();
        
        //options
        $(document).on('click', '.open-options', function (event) {
          event.preventDefault();
          $('#modal-options').iziModal('open');
        });
        $('#modal-options').iziModal({
          headerColor: '#26A69A', //头部颜色
          width: '50%', //宽度
          overlayColor: 'rgba(0, 0, 0, 0.5)', //背景色
          fullscreen: true, //全画面表示
          transitionIn: 'fadeInUp', //入场动画
          transitionOut: 'fadeOutDown' //出场动画
        });
        
        //iframe
        $(document).on('click', '.open-iframe', function (event) {
          event.preventDefault();
          $('#modal-iframe').iziModal('open', this);
        });
        $('#modal-iframe').iziModal({
          //width:400, //快读
          iframe: true, //打开iframe
          iframeWidth: 400,
          iframeHeight: 300, //iframe高度
          iframeURL: 'https://code.bfw.wiki/' //iframe内网址url
        });
        
        //alert
        $('#modal-alert').iziModal({
          headerColor: '#d43838', //头部颜色
          width: 400, //快读
          timeout: 10000, //关闭时间延迟
          pauseOnHover: true, //是否鼠标悬停暂停
          timeoutProgressbar: true, //是否显示关闭进度条
          attached: 'bottom' //弹出位置，left right top center right
        });
        $(document).on('click', '.open-alert', function (event) {
          event.preventDefault();
          $('#modal-alert').iziModal('open');
        });
    </script>



</body>

</html>