本文主要和大家介紹jQuery實現可兼容IE6的遮罩功能,詳細分析了jQuery遮罩層的佈局、樣式及功能實現技巧,需要的朋友可以參考下，希望能幫助到大家。
最精簡，最強大的 jQuery 遮罩層效果。
當瀏覽器改變大小時，遮罩層的大小會隨之改變。
遮罩層上方的對話方塊可隨 scroll 的改變而改變，即對話方塊在瀏覽器居中顯示。
HTML 程式碼
<p id="main"><a onclick="showBg();" href="#" rel="external nofollow" rel="external nofollow" >点击这里看 jQuery 遮罩层效果.</a></p> <p id="fullbg"></p> <p id="dialog"> <p class="close"><a onclick="closeBg();" href="#" rel="external nofollow" rel="external nofollow" >关闭</a></p> 正在加载，请稍后... </p>
CSS 程式碼
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
}
#main {
height: 1800px;
padding-top: 90px;
text-align: center;
}
#fullbg {
background-color: Gray;
left: 0px;
opacity: 0.5;
position: absolute;
top: 0px;
z-index: 3;
filter: alpha(opacity=50); /* IE6 */
-moz-opacity: 0.5; /* Mozilla */
-khtml-opacity: 0.5; /* Safari */
}
#dialog {
background-color: #FFF;
border: 1px solid #888;
display: none;
height: 200px;
left: 50%;
margin: -100px 0 0 -100px;
padding: 12px;
position: fixed !important; /* 浮动对话框 */
position: absolute;
top: 50%;
width: 200px;
z-index: 5;
}
#dialog p {
margin: 0 0 12px;
}
#dialog p.close {
text-align: right;
}jquery 程式碼
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height:bh,
width:bw,
display:"block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
// 浮动对话框
$(document).ready(function() {
var domThis = $('#dialog')[0];
var wh = $(window).height() / 2;
$("body").css({
"background-image": "url(about:blank)",
"background-attachment": "fixed"
});
domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + wh + ') + "px"');
});
</script>
<![endif]-->這裡別忘記引入jquery檔案。
相關推薦：
以上是jQuery實作IE6的遮罩功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
