首頁 > 開發者 > JavaScript
如果你還不會，可以看看下面這個簡單的例子。
複製代碼 代碼如下:
<html>
<head>
<title>彈出一個視窗後，後面的層不可操作</title>
<script>
function show() //顯示隱藏層和彈出層
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //顯示隱藏層
hidebg.style.height=document.body.clientHeight+"px"; //設定隱藏層的高度為當前頁面高度
document.getElementById("hidebox").style.display="block"; //顯示彈出層
}
function hide() //去除隱藏層和彈出層
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
</script>
<style>
body { margin:0px;padding:0px;text-align: center;}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*寬度設定為100%，這樣才能使隱藏背景層覆蓋原頁面*/
filter:alpha(opacity=60); /*設定透明度為60%*/
opacity:0.6; /*非IE瀏覽器下設定透明度為60%*/
display:none; /* http://www.jb51.net */
z-Index:2;}
#hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
#content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">點擊關閉</div>
<div id="content" onClick="show();">點擊試試</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
