插件描述：集合了几个常用的h5端模态框功能，比如从下向上滑出，从右向左滑出，弹出框，提示浮层等。并且蒙版区域不能滑动。
更新时间：2019-04-04 20:55:57
更新说明： 改进提示浮层的功能使其可以一直显示，添加手动关闭提示浮层的方法
更新时间：2019-02-16 21:40:12
更新说明：
1.添加了 shadeClose 选项，为false 的时候表示点击黑色蒙版不会关闭模态框，此时关闭需要调用 实例下的close方法
2. 当提示消息正在展示，再次提示消息，则马上关闭旧消息，不会等时间到才关闭
3. 修改了当模态框组合调用时会产生死循环的bug
更新时间：2019/1/20 下午11:29:10
更新说明：
1. 修正了，当页面有滚动条时，关闭浮层后，滚动条自动回到顶部的bug
2. 修正了，iphone6 safari 浏览器 提示消息不能弹出的bug
使用方法
1. 需引入
1 2 | <script type="text/javascript" src="zepto.min.js"></script><script type="text/javascript" src="slideAlert.js"></script> |
2. 用法如下：
html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!--模态框内容--><script id="J-top" type="text/html"> <p style="height: 1000px;">我是从上面滑出的模态框</p> </script><script id="J-bottom" type="text/html"> <p style="height: 1000px;">我是从下面滑出的模态框</p></script><script id="J-left" type="text/html"> <div class="sd-demo-content"> <p style="height: 1000px;">我是从左面滑出的模态框</p> </div> <div class="bottom_buttons"> <a href="">取消</a> <a href="">确认</a> </div></script> |
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var instance = $('your dom id').slideAlert({ // jquery 对象 "element": null, // 可填的参数是 top,bottom,left,right,alert,tips "type": "bottom", // 模态框中的内容 "content": $('#"J-left').html(), // 类型为tips时，自动关闭时间 "time": '1500', // 打开alert 前调用 "beforeOpen": function() {}, // 打开alert 后调用,常用于绑定模态框里面元素的事件 "afterOpen": function() {}, // 关闭前调用 "beforeClose": function() {}, // 关闭 alert 之后调用 "afterClose": function() {}}); |
此时 instance 实例有能调用两个函数：
1 2 3 4 | // 全部销毁instance.destroy()// 关闭modalinstance.close() |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery垂直时间轴
- 下一个特效： jQuery字符串查询插件queryString.js(原创)