最近做了几个点击按钮出现弹出框后，背景变灰且内容不可操作，上网一查有个遮罩层的东东，感觉很神奇。原理是设置一个隐藏的、无内容的div，当点击按钮后显示这个div并通过绝对定位中的fixed遮住内容，以此达到遮住的效果。以下是我写的一个简单的demo，重点是那个蒙板的css属性。
<!DOCTYPE html>
<html>
<head>
<style>
html, body, div, a{ margin: 0; padding: 0;}
.container{ text-align: center;}
/* 弹出框背景蒙板 */
.modal-backdrop{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #000; opacity: .8; z-index: 1000;}
/* 弹出框 */
.modal-box{ display: none; position: fixed; top: 50%; margin-top: -100px; left: 50%; margin-left: -250px; text-align: center; width: 500px; height: 200px; background-color: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index:1100;}
.modal-box .box-title{ margin: 40px 0; font-size: 18px; color: #000;}
.modal-box .box-btn-sure{ display: block; margin: 0 auto; width: 200px; height: 50px; line-height:50px; font-size: 14px; color: #fff; background-color: #FD460D; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
</style>
<title>弹出框demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<div class="container">
<a href="javascript:void(0);" title="点击按钮" id="btn_1">点我弹出框</a>
</div>
<div class="modal-backdrop"></div>
<div class="modal-box">
<div class="box-title">这是一个弹出框</div>
<a href="javascript:void(0);" title="点击按钮" class="box-btn-sure" id="box-btn-sure">确 定</a>
</div>
<script type="text/javascript">
$("#btn_1").on("click", function(){
<u>$(".modal-backdrop").css("display", "block");</u>
$(".modal-box").css("display", "block");
});
$("#box-btn-sure").on("click", function(){
$(".modal-box").css("display", "none");
<u>$(".modal-backdrop").css("display", "none");</u>
});
</script>
</body>
</html>
补充：
后来又做了个手机的背景蒙板，发现虽然能实现但内容还是可以滑动和点击，上网一查有一个移动端页面touch会穿透的常见bug，解决办法如下：
$(".modal-backdrop").on("touchmove", function(event){
//阻止手机滑动事件冒泡和默认事件
event.stopPropagation();
event.preventDefault();
});
这句话的意思是，阻止滑动的默认事件，多查了一些，遂，延伸一下：
1、阻止事件冒泡,使成为捕获型事件触发机制.
1
2
3
4
5
6
7
8
9
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
2、当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.
1
2
3
4
5
6
7
8
9
10
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}
---------------------
【转载，仅作分享，侵删】
作者：水中熊
原文：https://blog.csdn.net/gmd_web/article/details/49509249
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
