移动端弹出阴影遮罩的几点问题和解决方法

最新推荐文章于 2023-04-21 10:21:18 发布

原创最新推荐文章于 2023-04-21 10:21:18 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#弹出层 #阴影遮罩 #移动端 #document.body.scroll #document.documentEle

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

本文介绍了一种在移动端实现遮罩层的方法，解决了页面滚动导致遮罩层位置偏移的问题，并提供了一个实用的示例代码。

在做移动端的立即购买页面时，点击底部固定栏立即购买按钮需要弹出一个阴影遮罩，在遮罩顶部有一个固定在底部的页面，所以总共是3层页面：最底层浏览页->阴影遮罩页->最上层的立即购买选择规格数量页；效果如下图：

在次过程中遇到的一些问题以及解决方案总结如下：

问题1：阴影遮罩出现后底部的页面还可以滑动；

解决：在弹出遮罩的js里click事件中，给body加overflow:hidden的css属性；$("body").css("overflow","hidden");

问题2：页面向上滑动，阴影遮罩和阴影遮罩上的立即购买页面会随着往上移动；

解决：编写了如下函数计算页面移动的距离，让遮罩和立即购买页面也移动相应的距离，代码如下：

 function getScrollTop(){
        var scrollTop=0;
	if(document.documentElement&&document.documentElement.scrollTop){
	    scrollTop=document.documentElement.scrollTop;
	}else if(document.body){
	    scrollTop=document.body.scrollTop;
	}
	return scrollTop;
 }

写了一个简单的demo，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
		<title>阴影遮罩</title>
		<script src="js/jquery-1.11.1.min.js"></script>
		<style>
			body{
				padding:0px;
				margin:0px;
			}
			#back1{
				    z-index: 99999;
    				display: block;
    				background: rgba(0, 0, 0, 0.498039);
    				position: absolute;
    				top: 0px;
    				width: 100%;
    				height: 100%;
			}
			.one{
				height:100px;	
				width:100%;
				text-align: center;
				background-color:#fff;
				position:absolute;
				bottom:0px;
				display:none; 
				position: absolute;
				bottom: 0;
				z-index: 9999999;
			}
			.one span{
				font-size:24px;
				display: inline-block;
				height:30px;
				width:30px;
				position: absolute;
        		right: 18px;
    			top: 0px;
    			background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="back1" style="display: none; top: 0px;"></div>
		<div class="one"><p>这是遮罩上面的一层</p>     <span class="xx">x</span></div>
		<div>阴影遮罩下面的页面</div>
		<br /><br /><br /><br /><br /><br />
		<div style="height:500px;width:200px;border:1px solid red;"></div>
		<div>阴影遮罩下面的页面</div>
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<div class="bottom" style="position:fixed;bottom:0px;height:50px;width:100%;background-color:#ccc;line-height: 50px; text-align: center;">点我出现遮罩</div>
		<script type="text/javascript">
			//获取页面上移的距离
			 function getScrollTop(){
				  var scrollTop=0;
				  if(document.documentElement&&document.documentElement.scrollTop){
				  	scrollTop=document.documentElement.scrollTop;
				  }else if(document.body){
				  	scrollTop=document.body.scrollTop;
				  }
				  return scrollTop;
			}	
			$(".bottom").on("click",function(){
				$("#back1").css("top",getScrollTop()+'px');
				$("#back1").show();
				$(".one").css("bottom",-getScrollTop()+'px');
				$(".one").show();
				$("body").css("overflow","hidden");
			});
			$(".xx").on("click",function(){
				$("#back1").hide();
				$(".one").hide();
				$("body").css("overflow","auto");
			});
		</script>
	</body>
</html>

至此，一个好用的弹出demo就完美收官啦！！