当前位置:   article > 正文

html如何实现模态框状态下页面可以滚动,h5滑动模态框适用移动端

h5的 modal 页面滑动

d5fbbc8eec71da18b2b927022bbc3e5c.png

c714816320c3c7678952c0af200e40b9.png

插件描述:集合了几个常用的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. 需引入

2. 用法如下:

html:

我是从上面滑出的模态框

我是从下面滑出的模态框

我是从左面滑出的模态框

取消

确认

js: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 实例有能调用两个函数:// 全部销毁

instance.destroy()

// 关闭modal

instance.close()

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/839393
推荐阅读
相关标签
  

闽ICP备14008679号