概述：

artModal是一个兼容移动端的模态框插件。
灵感来自BootStrap的modal组件，与其不同的是artModal能够做到：
- 零依赖其他组件
- 向下兼容到IE6
- 允许多个模态框同时堆叠出现
与以往的弹窗插件不同，artModal不需要大量的js配置选项，用户仅需利用html、css就可以充分自由定制模态框的所有外观。

引入方式：

页面头部引入：

<link rel="stylesheet" href="../src/artModal.css">

页面底部引入：

<script src="../src/artModal.js"></script>

基础演示：

<button data-toggle="artModal" data-target="myModal_1">基础演示</button>

<div class="artModal fade" id="myModal_1">
    <div class="artModal-dialog">
        <div class="artModal-content">
            <div class="custom_style">
                基础演示<button data-dismiss="artModal">关闭</button>
            </div>
        </div>
    </div>
</div>

基础演示注意：<div class="artModal-content"> 元素中的所有html和css都是交给用户自由定制的，artModal不会对其中的html和css有任何要求。

去除过渡动画：

<button data-toggle="artModal" data-target="myModal_2">去除过渡动画</button>

<div class="artModal" id="myModal_2">
    <div class="artModal-dialog">
        <div class="artModal-content">
            <div class="custom_style">
            去除过渡动画<button data-dismiss="artModal">关闭</button>
            </div>
        </div>
    </div>
</div>

去除过渡动画和上面的例子相比，仅仅是去掉了.fade这个class。

模态框中的内容高度超出视口时：

高度超出视口无需做任何其他配置。

多个模态框同时堆叠出现：

堆叠出现无需做任何其他配置。

用javascript触发一个模态框：

例如，我们用javascript显示"基础演示"中的那个模态框，并让它4秒钟后自动关闭

<button id="btn">我只是一个普通的button</button>

var timer;
var btn = document.getElementById('btn');
btn.onclick = function () {
    var myModal_1_obj = artModal({  //构建artModal实例
        element: document.getElementById('myModal_1'),
        open: function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                myModal_1_obj.close();  //关闭
            }, 4000);
        },
        close: function () {
            if (timer) {
                clearTimeout(timer);
            }
        }
    });
    myModal_1_obj.open();  //显示
}

我只是一个普通的button artModal可接收三个参数：

element：模态框对应的dom对象，必须
open：模态框显示时执行的回调函数，可选
close：模态框关闭时执行的回调函数，可选

artModal实例公开的两个方法：

open()：显示模态框
close()：关闭模态框

本文对你有帮助？欢迎扫码加入前端学习小组微信群：

artModal，一个兼容移动端的模态框插件

概述：