<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>遮蓋層</title>
<style>
/* 登錄層 */
#choose{
display:none;
width:360px;
height:230px;
background:#69F;
position:absolute;
top:30%;
left:40%;
z-index:1000;
opacity:0.8; /*背景的透明度:(Firefox適用；）*/
filter:alpha(opacity =80); /*背景的透明度:(IE適用)；*/
}
/*遮罩層*/
#mid{
display:none;
width:100%;
height:100%;
background:#000;
position:absolute;
top:0;
left:0;
z-index:10;
opacity:0.4; /*背景的透明度:(Firefox適用；）*/
filter:alpha(opacity =40); /*背景的透明度:(IE適用)；
}
</style>
</head>
<body>
<a href="#" class="click">點擊按鈕</a>
<!--填充內容開始 往body里面寫點內容，因為遮蓋層要通過body去獲取界面的高寬度，從而body的高寬同時決定了遮蓋層的高寬。但是碼友們在平時運用這個demo的時候，由於所寫body的代碼肯定是有的，而且是比較多的，所以一定要忽略我下面填充的內容->
1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br />
1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />
<!-- 填充內容結束 -->
<!-- 表單層 -->
<div id="choose">
<!-- 表單頭部 -->
<a class=close>關閉</a>
<table>
<tr>
<td colspan="3" class="td">
</td>
</tr>
<tr>
<td class="td1">登錄名：</td>
<td class="td2"><input type="text"/></td>
<td class="td3">*</td>
</tr>
<tr>
<td class="td1">密 碼：</td>
<td class="td2"><input type="password"/></td>
<td class="td3">*</td>
</tr>
<tr>
<td class="td1">驗證碼：</td>
<td class="td2"><input type="text"/></td>
<td class="td3">*</td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="登陸"/></td>
</tr>
</table>
</div>
<!-- 遮蓋層 -->
<div id="mid"></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
<script>
$(function(){
$(".click").click(function(){
var bh = $("body").height(); //獲取當前瀏覽器界面的高度
var bw = $("body").width(); //獲取當前瀏覽器界面的寬度
$("#mid").css({
height:bh, //給遮蓋層的div的高寬度賦值
width:bw,
display:"block" //遮蓋層顯示
});
$("#choose").show();
});
$(".close").click(function(){
$("#choose").hide();
$("#mid").hide();
});
});
</script>
</html>
