怎么锁定可视区域？_html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 08:59:111210瀏覽
nbsp;html>
<script> <br /> <br />function shield(){ <br /> var s = document.getElementById("test"); <br /> s.style.display = "block"; <br /> <br /> var l = document.getElementById("log_window"); <br /> l.style.display = "block"; <br />} <br />function cancel_shield(){ <br /> var s = document.getElementById("test"); <br /> s.style.display = "none"; <br /> <br /> var l = document.getElementById("log_window"); <br /> l.style.display = "none"; <br />} <br /></script>
打开遮罩
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
aaa
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> 陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn