<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#login
{
display:none;
border:1em solid purple;
height:30%;
width:50%;
position:absolute;/*讓節點脫離文檔流,我的理解就是,從頁面上浮出來,不再按照文檔其它內容布局*/
top:24%;/*節點脫離了文檔流,如果設置位置需要用top和left,right,bottom定位*/
left:24%;
z-index:2;/*個人理解為層級關系,由於這個節點要在頂部顯示,所以這個值比其余節點的都大*/
background: white;
}
#over
{
width: 100%;
height: 100%;
opacity:0.8;/*設置背景色透明度,1為完全不透明,IE需要使用filter:alpha(opacity=80);*/
filter:alpha(opacity=80);
display: none;
position:absolute;
top:0;
left:0;
z-index:1;
background: silver;
}
</style>
<script type="text/javascript">
function show()
{
var login = document.getElementById('login');
var over = document.getElementById('over');
login.style.display = "block";
over.style.display = "block";
}
function hide()
{
var login = document.getElementById('login');
var over = document.getElementById('over');
login.style.display = "none";
over.style.display = "none";
}
</script
</head>
<body>
<a href="javascript:show()">彈出</a>
<div id="login">
<a href="javascript:hide()">關閉</a>
<div>這里是關閉彈窗的內容</div>
</div>
<div id="over"></div>
</body>