关于移动端css+js解决遮罩问题方法。

今天找到一种解决方式:当一个页面超过屏幕的时候,会出现滚动,但是当我们弹出遮罩时,会发现还是页面还是可以滚动。

有2种情况:

第一种:就是在弹框的遮罩上有滚动(比如说滚动列表),就是说页面一个滚动,弹框也有一个滚动。

解决方法:把整个页面用一个div(当然也可以用别的)包起来,在点击页面时,给div动态加一个class,再把遮罩弹框显示;点击遮罩时弹框时,再把class移除。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style>
			.overlaytwo,
			.overlay {
				position: fixed;
				top: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
				background-color: transparent;
			}
			.overlaytwo{
				background-color: rgba(0,0,0,0.8);
				display: none;
			}
  </style>
</head>
<body>
	<div id="overlay">
		<p id="yaya">吖吖aaa</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
		<p>吖吖</p>
	</div>
	<div id="overlaytwo" class="overlaytwo">
			<div style="position: absolute;background: red;color: #FFFFFF;z-index: 1;">
				<div style="height: 100px;overflow: auto;">
					<p>bbbbbbbbbbbb</p>
					<p>bbbbbbbbbbbb</p>
					<p>bbbbbbbbbbbb</p>
					<p>bbbbbbbbbbbb</p>
				</div>				
			</div>
	</div>
	
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
		$("#yaya").click(function(){
			$("#overlay").addClass("overlay");
			$("#overlaytwo").show();
		});
		$("#overlaytwo").click(function(){
			$("#overlay").removeClass("overlay");
			$("#overlaytwo").hide();
		});
</script>
</html>

第二种:就是在弹框的遮罩上无滚动。这时候想要页面在弹框的时候不滚动就直接使用阻止冒泡事件就可以了。

解决方法: 把遮罩弹框在滑动的时候给一个阻止冒泡事件。
$('#shade').bind( "touchmove", function (e) {
   e.preventDefault();
});


展开阅读全文

没有更多推荐了,返回首页