怎么锁定可视区域？_html/css_WEB-ITnose-HTML Tutorial-php.cn

怎么锁定可视区域？_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:59:11

Original

1151 people have browsed it

nbsp;html>

全屏div

<script> function shield(){ var s = document.getElementById("test"); s.style.display = "block"; var l = document.getElementById("log_window"); l.style.display = "block"; } function cancel_shield(){ var s = document.getElementById("test"); s.style.display = "none"; var l = document.getElementById("log_window"); l.style.display = "none"; } </script>

打开遮罩

aaa

关闭

点击打开遮罩时，可视区变色并且锁定，滚动条不能下拉

回复讨论(解决方案)

<!DOCTYPE html><html><head><meta charset="utf-8"><title>全屏div</title><style>html,body {    margin:0;    height:100%;}#test {    width:100%;    height:100%;    background-color:#000;    position:fixed;    top:0;    left:0;    z-index:2;    opacity:0.3;    /*兼容IE8及以下版本浏览器*/    filter: alpha(opacity=30);    display:none;	overflow-y:hidden;}#log_window {    width:200px;    height:200px;    background-color:#FF0;        margin: auto;    position:fixed;    z-index:3;    top: 0;    bottom: 0;    left: 0;    right: 0;    display:none;}</style><script>function shield(){    var s = document.getElementById("test");    s.style.display = "block";        var l = document.getElementById("log_window");    l.style.display = "block";	document.getElementById("body").style.overflowY = "hidden";}function cancel_shield(){    var s = document.getElementById("test");    s.style.display = "none";        var l = document.getElementById("log_window");    l.style.display = "none";	document.getElementById("body").style.overflowY = "auto";}</script></head><body id="body"><a href="javascript:shield()">打开遮罩</a>点击打开遮罩时，可视区变色并且锁定，滚动条不能下拉<div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div>aaa</div><div id="test"></div><div id="log_window"><a href="javascript:cancel_shield()">关闭</a></div></body></html>

Copy after login