Heim > Web-Frontend > js-Tutorial > jQuery implementiert die Maskenfunktion von IE6

jQuery implementiert die Maskenfunktion von IE6

小云云
Freigeben: 2018-02-05 15:32:07
Original
1323 Leute haben es durchsucht

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>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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]-->
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage