禁止遮罩层下屏幕滚动

最新推荐文章于 2024-02-15 14:24:21 发布

置顶 Hao-Z-Y

最新推荐文章于 2024-02-15 14:24:21 发布

阅读量1.1k

点赞数

分类专栏： js运用文章标签：禁止遮罩层下图层滑动弹出框后禁止图层移动 js控制遮罩层下图层移动

本文链接：https://blog.csdn.net/weixin_41634608/article/details/83348845

版权

js运用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Document</title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			.div1 {
				width: 100%;
				height: 3000px;
				background: #2AABD2;
				z-index: 100;
			}

			.div2 {
				width: 50px;
				height: 50px;
				z-index: 200;
				background: orangered;
			}

			.cover {
				height: 100%;
				width: 100%;
				background: #000000;
				opacity: 0.5;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 300;
				display: none;
			}

			.window {
				position: fixed;
				top: 50%;
				left: 50%;
				height: 316px;
				width: 70%;
				margin: -158px 0 0 -35%;
				background-color: white;
				z-index: 20000;
				border-radius: 9px;
				display: none;
			}
		</style>
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<div class="div1">
			<div class="div2"></div>
		</div>
		<div class="cover"></div>
		<div class="window">
			<span class="close">关闭弹窗</span>
		</div>

	</body>
	<script>
		//方法一:当遮罩层出现时，禁止鼠标滚轮滚动和touchmove事件，比较暴力
		/* $(document).on("click", ".div2", function() {
			$("body").css("overflow", "hidden");
			$(".cover").css("display", "block");
			$(".window").css("display", "block");
		})
		$(document).on("click", ".close", function() {
			$(".cover").css("display", "none");
			$(".window").css("display", "none");
			$("body").css("overflow", "scroll");
		}) */
		//方法二:当遮罩层出现时，禁止触屏滑动事件，但是没有禁止鼠标滚轮滚动
		$(document).on("click", ".div2", function() {
			$(".cover").css("display", "block");
			$(".window").css("display", "block");
			$(".cover").on("touchmove", function(e) {
				e.preventDefault();
			})
		}) 
		$(document).on("click", ".close", function() {
			$(".cover").css("display", "none");
			$(".window").css("display", "none");
		})
        //方法三：当遮罩层出来时，将背景图层添加一个position：fixed属性，但是可能会发生位移
        /*$(document).on("click", ".div2", function() {
			$(".cover").css("display", "block");
			$(".window").css("display", "block");
			$(".body").css("position","fixed");
		}) 
		$(document).on("click", ".close", function() {
			$(".cover").css("display", "none");
			$(".window").css("display", "none");
            $(".body").css("position","initial");
		})*/
	</script>
</html>

注意：

在方法一中遮罩层导航条禁用后，导致底层页面右侧导航条的隐藏，一旦关闭遮罩层，底层右侧导航条再次出现，这就导致底层页面出现位置的变动
在方法二中由于只是禁止了触屏滑动事件，而没有禁止鼠标滚轮滚动，所以我们在使用chorme调试的时候，不要把滚轮滑动导致最下层图层滑动认识是代码无效！！
在方法三中遮罩层弹出后背景层添加了fixed属性后，可能对背景层其他元素造成影响，使用的时候需要注意

Hao-Z-Y

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
禁止遮罩层下屏幕滚动

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxi
复制链接

扫一扫