Detailed explanation of jQuery implementation of mask function compatible with IE6

This article mainly introduces jQuery to implement the mask function that is compatible with IE6, and analyzes in detail the layout, style and function implementation techniques of jQuery mask layer. Friends in need can refer to the following

Examples of this article Use jQuery to implement the mask function that is compatible with IE6. Share it with everyone for your reference, the details are as follows:

The most streamlined and powerful jQuery mask layer effect.

When the browser changes size, the size of the mask layer will change accordingly.

The dialog box above the mask layer can change with the scroll change, that is, the dialog box is displayed in the center of the browser.

HTML Code

##

<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 Code

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 code

<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 = $(&#39;#dialog&#39;)[0];
  var wh = $(window).height() / 2;
  $("body").css({
    "background-image": "url(about:blank)",
    "background-attachment": "fixed"
  });
  domThis.style.setExpression(&#39;top&#39;, &#39;eval((document.documentElement).scrollTop + &#39; + wh + &#39;) + "px"&#39;);
});
</script>
<![endif]-->

Don’t forget to introduce the jquery file here

The above is the detailed content of Detailed explanation of jQuery implementation of mask function compatible with IE6. For more information, please follow other related articles on the PHP Chinese website!