简介

artModal 是一个兼容移动端的模态框JQuery插件，与以往的弹窗插件不同，artModal 不需要大量的 js 配置选项，用户仅需利用 html、css 就可以充分自由定制模态框的所有外观。主要特定：

零依赖其他组件
向下兼容到 IE6
允许多个模态框同时堆叠出现

（下载的附件中附有DEMO）

使用

1.  引入文件

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

2.  HTML

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>

3.  调用

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);
            }
        },
        position: 'bottom'
    });
    myModal_1_obj.open();  //显示
}

相关链接

GitHub 地址 ：https://github.com/liyu365/artModal

Gitee 地址：https://gitee.com/mirrors/art-modal

在线演示 ：https://liyu365.github.io/artModal/demo/