Heim >Web-Frontend >HTML-Tutorial >怎么锁定可视区域？_html/css_WEB-ITnose
怎么锁定可视区域？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:59:111210Durchsuche
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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何用css实现元素水平与垂直居中_html/css_WEB-ITnoseNächster Artikel：Fab 和 Dialog 之间的过渡效果（Fab and Dialog Morphing Animation）_html/css_WEB-ITnose