Teilen Sie zwei jQuery-Popup-Boxen mit masks_jquery

Das erste: Das Seitenmasken-Popup-Feld ist die häufigste Situation. Verwenden Sie jQuery, um das Seitenmasken-Popup-Feld zu vervollständigen.

Der HTML-Code lautet wie folgt:

 <div id="main"><a href="javascript:showBg();">点击这里查看效果</a>
 <div id="fullbg"></div>
 <div id="dialog">
 <p class="close"><a href="#" onclick="closeBg();">封闭</a></p>
 <div>正在加载，请稍后....</div>
 </div>
</div>

Der CSS-Code lautet wie folgt:

 body {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 margin:0;
}
#main {
 height:1800px;
 padding-top:90px;
 text-align:center;
}
#fullbg {
 bac千克round-color:gray;
 left:0;
 opacity:0.5;
 position:absolute;
 top:0;
 z-index:3;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity:0.5;
}
#dialog {
 bac公斤round-color:#fff;
 border:5px solid rgba(0,0,0, 0.4);
 height:400px;
 left:50%;
 margin:-200px 0 0 -200px;
 padding:1px;
 position:fixed !important; /* 浮动对话框 */
 position:absolute;
 top:50%;
 width:400px;
 z-index:5;
 border-radius:5px;
 display:none;
}
#dialog p {
 margin:0 0 12px;
 height:24px;
 line-height:24px;
 bac公斤round:#CCCCCC;
}
#dialog p.close {
 text-align:right;
 padding-right:10px;
}
#dialog p.close a {
 color:#fff;
 text-decoration:none;
}

Der jQuery-Code lautet wie folgt:

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

Das Zweite: Erstellen Sie einfach eine jQuery-Maskenebene. Natürlich kann diese auch in eine öffentliche Funktion umgewandelt werden, um sie in Zukunft einfacher verwenden zu können.

Geben Sie zuerst den HTML-Code an:

<p class="showbtn"><a href="javascript:void(0);">显示遮罩层</a></p>
<div id="bg"></div>
<div class="box" style="display:none">
 <h2>jQuery 学习交流<a href="#" class="close">关闭</a></h2>
 <div class="list">
 <ul>
  <li>脚本之家</li>
  <li>脚本之家</li>
  <li>脚本之家</li>
 </ul>
 </div>
</div>

Der Stil der Maskenebene ist wie folgt:

/* box */
.box{position:absolute;width:600px;left:50%;height:auto;z-index:100;background-color:#fff;border:1px #ddd solid;padding:1px;}
.box h2{height:25px;font-size:14px;background-color:#aaa;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.box h2 a{position:absolute;right:5px;font-size:12px;color:#fff;}
.box .list{padding:10px;}
.box .list li{height:24px;line-height:24px;}
.box .list li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.showbtn {font:bold 24px '微软雅黑';}
#bg{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}

Schließlich wird jQuery verwendet, um die Popup-Ebene anzuzeigen und auszublenden:

$(function () {
 $(".showbtn").click(function () {
 $("#bg").css({
  display: "block", height: $(document).height()
 });
 var $box = $('.box');
 $box.css({
  //设置弹出层距离左边的位置
  left: ($("body").width() - $box.width()) / 2 - 20 + "px",
  //设置弹出层距离上面的位置
  top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + "px",
  display: "block"
 });
 });
 //点击关闭按钮的时候，遮罩层关闭
 $(".close").click(function () {
 $("#bg,.box").css("display", "none");
 });
});

Zusammenfassung: Die Idee, jQuery zum Implementieren der Maskierung zu verwenden, besteht darin, die Maskierungsebene auszulösen, wenn auf die Schaltfläche geklickt wird, und die Maskierungsebene die gesamte Seite über den Z-Index der CSS-Ebene der Popup-Ebene abdecken zu lassen Gleichzeitig über den Z-Index der Popup-Ebene auf CSS-Ebene Über der Maskenebene, sodass die Popup-Ebene hervorgehoben wird. Wenn Sie dann auf die Schaltfläche „Popup-Ebene schließen“ klicken, wird die Popup-Ebene ausgeblendet und die Maskenebene wird ebenfalls ausgeblendet. Diese Schreibmethode ist relativ schnell. Ich werde diesen Code später in eine öffentliche Funktion schreiben, damit er mehrmals aufgerufen werden kann.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.