建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery兼容移动端的模态框插件artModal.js

来源:易助科技网浏览量:11收藏

简介

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/