点击按钮后背景变灰+阻止事件

最新推荐文章于 2021-08-03 15:12:11 发布

水中熊

最新推荐文章于 2021-08-03 15:12:11 发布

阅读量1w

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/gmd_web/article/details/49509249

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

最近做了几个点击按钮出现弹出框后，背景变灰且内容不可操作，上网一查有个遮罩层的东东，感觉很神奇。原理是设置一个隐藏的、无内容的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、阻止事件冒泡,使成为捕获型事件触发机制.

function stopBubble(e) {

//如果提供了事件对象，则这是一个非IE浏览器

if ( e && e.stopPropagation )

//因此它支持W3C的stopPropagation()方法

e.stopPropagation();

else

//否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true ;

}

2、当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

//阻止浏览器的默认行为

function stopDefault( e ) {

//阻止默认浏览器动作(W3C)

if ( e && e.preventDefault )

e.preventDefault();

//IE中阻止函数器默认动作的方式

else

window.event.returnValue = false ;

return false ;

}

水中熊

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击按钮后背景变灰+阻止事件

最近做了几个点击按钮出现弹出框后，背景变灰且不可操作
复制链接

扫一扫

专栏目录

点击按钮后背景变灰+阻止事件

“相关推荐”对你有帮助么？