ホームページ >ウェブフロントエンド >htmlチュートリアル >表示領域をロックするにはどうすればよいですか? _html/css_WEB-ITnose
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
4d0d87937f6c83b675e896c64d3eb7c9
b2386ffb911b14667cb8f0f91ea547a7全屏div6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
html,body {
margin:0;
height:100%;
}
#test {
width:100%;
height:100%;
background-color:#000;
position:absolute;
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: absolute;
z-index:3;
top: 0;
bottom: 0;
left: 0;
right: 0;
display:none;
}
531ac245ce3e4fe3d50054a55f265927
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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";
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
e82c173656efddaf7040464b1306b23f打开遮罩5db79b134e9f6b82c0b36e0489ee08ed
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68dc6dce4a544fdca2df29d5ac0ea9906baaa16b28748ea4df4d9c2150843fecfba68
<!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>