插件描述：集合了几个常用的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. 需引入
<script type="text/javascript" src="zepto.min.js"></script> <script type="text/javascript" src="slideAlert.js"></script>
2. 用法如下：
html:
<!--模态框内容--> <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:
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()
PREVIOUS:
NEXT:
相关插件-弹出层,工具提示
flavr―超级漂亮的jQuery扁平弹出对话框
flavr是一个时尚的扁平弹出对话框为您的下一个网站。flavr是响应设计布局，能够适应任何屏幕大小。得到最好的用户体验,使用流行的animate.css动画，最重要的是,flavr可以运行在任何新的浏览器IE8(+),任何设备和屏幕大小。
弹出层
讨论这个项目（31）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
SunJim 0
2019/7/23 14:53:56
你好问一下
beforeOpen: function() {
console.log('before open callback');
document.getElementById('result').innerHTML == "bbbbb";
}, 这里面为啥改变不了P标签里面的内容啊
<script id="J-alert" type="text/html"> <div class="mark"> <div class=" container"> <p style="text-align: center">恭喜你抽中了 <p d="result" style="text-align: center; color: #ff6c8c; font-size: 20px; font-weight: bold">500元优惠券 <div class="commit-bg"> <button id="commit-btn" class="commit-btn" onclick="javascript:commit_action">确认提交</button> </div> </div> <img id="close-alert" src="<%=request.getContextPath()%>/unicorn_aged/activities/luck/img/close_btn.png" class="close-btn"> </div> </script>
慕牧木0
2019/7/23 15:13:46
-
用afterOpen试试呗
感应 0
2019/7/17 10:22:07
-
麻烦问一下，弹出层如何加入关闭按钮呢？还有，如果同一页面有两个以上的弹出层弹框，且内容不同，该怎么设置？谢谢
慕牧木1
2019/7/17 10:41:07
-
1. 弹窗右侧加个 "x" 绑定事件，然后手动调关闭弹窗的方法就行了
2. 我这个就是个简单弹窗，不支持多层欠套的
SunJim 0
2019/6/26 9:21:01
-
麻烦问一下 你的这个组件怎么能让他自动弹出来呢 而不是手动去调 就是一个定时任务结束了直接弹出来那种的
慕牧木0
2019/6/26 9:34:56
-
你可以把这个封装到一个方法里，定时器完事了直接调方法不就行了
SunJim0
2019/6/26 9:53:16
function showResult(index) {
// alert('恭喜你中了第'+ index +'个')
var instance = null;
$('#luck').delegate('.cjBtn', 'auto', function(e) {
var type = $(this).attr('data-type');
instance = $(this).slideAlert({
type: type,
content: $('#J-' + type).html(),
beforeOpen: function() {
console.log('before open callback');
},
afterClose: function() {
console.log('after close callback');
},
afterOpen: function() {
console.log('after open callback');
},
shadeClose: true,
time: $(this).attr('data-time')
});
});
$('#J-close-tips').on('click', function(e) {
instance.closeTips()
})
}我是封到方法里了 但是怎么都不出来
SunJim0
2019/6/26 9:54:20
<div id="bottom" class="bottomBg"> <div class="shanDeng" id="deng"> <div id="luck"> <!-- luck --> <table> <tr> <td class="luck-unit luck-unit-0"><img src="./img/1.png" class="prize"></td> <td class="luck-unit luck-unit-1"><img src="./img/2.png" class="prize"></td> <td class="luck-unit luck-unit-2"><img src="./img/3.png" class="prize"></td> </tr> <tr> <td class="luck-unit luck-unit-7"><img src="./img/6.png" class="prize"></td> <td class="cjBtn" id="btn" data-type="alert"></td> <td class="luck-unit luck-unit-3"><img src="./img/5.png" class="prize"></td> </tr> <tr> <td class="luck-unit luck-unit-6"><img src="./img/3.png" class="prize"></td> <td class="luck-unit luck-unit-5"><img src="./img/4.png" class="prize"></td> <td class="luck-unit luck-unit-4"><img src="./img/8.png" class="prize"></td> </tr> </table> </div> <!-- luckEnd --> </div> </div>
慕牧木1
2019/6/26 10:32:50
function showResult(index) {
// alert('恭喜你中了第'+ index +'个')
var instance = $(this).slideAlert({
type: type,
content: $el.html(),
beforeOpen: function() {
console.log('before open callback');
},
afterClose: function() {
console.log('after close callback');
},
afterOpen: function() {
console.log('after open callback');
},
shadeClose: true,
time: $(this).attr('data-time')
});
}这样写调方法就能出来了
慕牧木0
2019/6/26 10:43:13
-
或者用trigger也行
SunJim0
2019/6/26 13:14:47
-
3q 已经可以了
SunJim 0
2019/6/12 13:13:58
-
宽高要是能设置就完美了
慕牧木1
2019/6/12 13:35:20
-
浮层容器的id是这个：J-jq-sd-alert， 您可以在beforeOpen 里为容器加一个您自己的css类，然后覆盖样式就可以了。
SunJim0
2019/6/12 13:44:28
-
ok 我试试 多谢大神指导 我是个小白
SunJim 0
2019/6/11 9:52:34
-
弹框弹出来之后 下面的列表还可以滑动
SunJim1
2019/6/11 10:06:50
afterOpen 里面加上这个就好了。
document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个。
SunJim 0
2019/6/10 16:50:17
prizeList.html?_ijt=8dv5qkqj6glpp633q0jqrbs64a:127 Uncaught TypeError: $(...).slideAlert is not a function at HTMLButtonElement.<anonymous> (prizeList.html?_ijt=8dv5qkqj6glpp633q0jqrbs64a:127) at HTMLDivElement.l (zepto.min.js:2) at HTMLDivElement.a.proxy (zepto.min.js:2)
咋回事啊这是
慕牧木0
2019/6/10 16:55:52
-
您确定引入顺序是正确的吗，先是zepto.js 然后是 slideAlert.js 然后是 你自己的js
SunJim0
2019/6/10 17:07:17
-
3q解决了 就是引入顺序的事
a294228566 0
2019/2/15 1:34:39
-
请问能不能不自动关闭？
慕牧木0
2019/2/15 15:05:52
-
添加了 点击黑色蒙版不自动关闭 的选项，不清楚是不是你说的 不自动关闭 ，等版本更新了以后你可以看下
a2942285660
2019/2/16 0:03:35
-
你说这个也是我想要的，不过我一开始想说的是，能不能不要定时关闭tip？等我自己调用close才关闭
慕牧木0
2019/4/8 12:52:37
-
一直显示的话传 time:0 , 手动关闭加了个 closeTips 方法
I Want My Tears Back 0
2019/1/17 17:40:16
-
你这个有一个BUG，就是移动端我输入框，验证后不对，然后用你的提示框。但是如果有滚动条他会把滚动条清除并且回到顶部
慕牧木0
2019/1/18 12:41:20
-
已经修复，等审核通过就行了
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
