jQuery clique sur le bouton pour faire apparaître le calque de masque et centrer le contenu avec des effets spéciaux

jQuery clique sur le bouton pour faire apparaître le calque de masque et centrer le contenu avec des effets spéciaux_jquery

WBOY

Libérer： 2016-05-16 15:25:59

original

1184 Les gens l'ont consulté

Cet article partage avec vous l'effet spécial jQuery consistant à cliquer sur un bouton pour faire apparaître le calque de masque et centrer le contenu :

Comme il s'agit d'un programme de test, je n'ai pas ajouté de bouton de fermeture.
1. Programme principal

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>弹出居中遮罩</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/layout.css"/>
 </head>
 <body>
  <section class="test">
   这里是主体内容<br />
  <input type="button" class="testButton" value="弹出遮罩" />
  </section>
  <section class="testBg">
   <section class="testCont">
    这里是弹出的内容测试
   </section>
  </section>
  <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>

Copier après la connexion

2. Style CSS

*{
 margin: 0;
 padding: 0;
}
.testBg{
 position: absolute;
 top: 0;
 background-color: #000;
 filter:alpha(opacity=80); /* IE */ 
 -moz-opacity:0.8; /* Moz + FF */ 
 opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
 display:none ;     
}
.testBg .testCont{
 position: absolute;
 top: 0;
 left: 0;
 width:200px;
 border: 1px #ffc700 solid;
 color: #ffc700;
}

Copier après la connexion

3.Programme JS
C'est l'objet de cet essai. Examinons un programme JS incorrect :

$(function(){
 $(".testBg").height($(window).height()).width($(window).width()); //使遮罩的背景覆盖整个页面
 var testContTop=($(window).height()-$(".testCont").height())/2;  //计算弹出的框距离页面顶部的距离
 var testContWidth=($(window).width()-$(".testCont").width())/2;   //计算弹出的框距离页面左边的距离
 $(".testCont").css({
  "top":testContTop,
  "left":testContWidth
 });
 $(".testButton").click(function(){
  $(".testBg").show();
 }) 
})

Copier après la connexion

Le programme ci-dessus semble convenir, alors jetons un coup d'œil au résultat :

L'espacement supérieur et inférieur est incohérent lors de la mesure réelle.

Alors le bon programme JS est :

$(function(){
 $(".testBg").height($(window).height()).width($(window).width());//使遮罩的背景覆盖整个页面
 
 $(".testButton").click(function(){
  $(".testBg").show();
  showDiv();
 }) 
})
function showDiv(){
  
 var testContTop=($(window).height()-$(".testCont").height())/2; //计算弹出的框距离页面顶部的距离
 var testContWidth=($(window).width()-$(".testCont").width())/2; //计算弹出的框距离页面左边的距离
 $(".testCont").css({
  "top":testContTop,
  "left":testContWidth
 });
}

Copier après la connexion

Comme le montre le programme ci-dessus, après l'apparition du calque de masque, une fonction est exécutée pour définir dynamiquement la taille d'arrière-plan du calque contextuel et l'espacement haut et gauche de la page, au lieu de définir le popup lorsque JS est chargé en premier.

Ce qui précède représente l'intégralité du contenu de cet article, vous apprenant comment obtenir l'effet de cliquer sur un bouton pour faire apparaître le calque de masque et centrer le contenu,