Partagez deux boîtes contextuelles jQuery avec Masks_jquery

La première : La pop-up de masque de page est la situation la plus courante. Utilisez jQuery pour compléter la pop-up de masque de page. Les principales compétences utilisées sont JQuery, css et html.

Le code html est le suivant :

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

Le code css est le suivant :

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

Le code jQuery est le suivant :

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

Le deuxième : Créez simplement un calque de masque jQuery. Bien sûr, il peut également être transformé en fonction publique pour une utilisation facile à l'avenir. Ce tutoriel convient aux novices.

Donnez d'abord le 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>

Le style du calque de masque est le suivant :

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

Enfin, jQuery permet d'afficher et de masquer la couche popup :

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

Résumé : L'idée d'utiliser jQuery pour implémenter le masquage est de déclencher le calque de masquage lorsque vous cliquez sur le bouton, et de laisser le calque de masquage couvrir toute la page via le z-index au niveau CSS du calque contextuel, et à en même temps, via le z-index de niveau CSS du calque contextuel au-dessus du calque de masque afin que le calque contextuel soit mis en surbrillance. Ensuite, lorsque vous cliquez sur le bouton Fermer le calque contextuel, le calque contextuel sera masqué et le calque de masque sera également masqué. Cette méthode d'écriture est relativement rapide. J'écrirai ce code dans une fonction publique plus tard lorsque j'en aurai le temps, afin qu'il puisse être appelé plusieurs fois.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.