jQuery implementiert die Maskenfunktion von IE6

In diesem Artikel wird hauptsächlich die Implementierung der mit IE6 kompatiblen Maskenfunktion vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen alle.

Der schlankste und leistungsstärkste jQuery-Maskenebeneneffekt.

Wenn der Browser die Größe ändert, ändert sich auch die Größe der Maskenebene entsprechend.

Das Dialogfeld über der Maskenebene kann sich ändern, wenn sich der Bildlauf ändert, d. h. das Dialogfeld wird in der Mitte des Browsers angezeigt.

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

Vergessen Sie nicht, hier die JQuery-Datei einzuführen.

Verwandte Empfehlungen:

JQuery-Maskenschicht-Implementierungsmethode

Das obige ist der detaillierte Inhalt vonjQuery implementiert die Maskenfunktion von IE6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!