Kongsi dua kotak timbul jQuery dengan masks_jquery

Yang pertama: Kotak pop timbul page mask ialah situasi yang paling biasa Gunakan jQuery untuk melengkapkan kotak pop timbul page mask Kemahiran utama yang digunakan ialah JQuery, css dan html.

Kod html adalah seperti berikut:

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

Kod css adalah seperti berikut:

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

Kod jQuery adalah seperti berikut:

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

Yang kedua: Cukup buat lapisan topeng jQuery Sudah tentu, ia juga boleh dijadikan fungsi awam untuk kegunaan mudah pada masa hadapan.

Pertama berikan html:

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

Gaya lapisan topeng adalah seperti berikut:

/* 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;}

Akhir sekali, jQuery digunakan untuk memaparkan dan menyembunyikan lapisan pop timbul:

$(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");
 });
});

Ringkasan: Idea menggunakan jQuery untuk melaksanakan masking adalah untuk mencetuskan lapisan masking apabila butang diklik, dan biarkan lapisan masking menutupi seluruh halaman melalui css level z-index lapisan pop timbul, dan pada pada masa yang sama, melalui indeks z tahap css lapisan pop timbul Di atas lapisan topeng supaya lapisan pop timbul diserlahkan. Kemudian apabila anda mengklik butang lapisan pop timbul tutup, lapisan pop timbul akan disembunyikan, dan lapisan topeng juga akan disembunyikan. Kaedah penulisan ini agak pantas Saya akan menulis kod ini ke dalam fungsi awam apabila saya mempunyai masa nanti, supaya ia boleh dipanggil beberapa kali.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.