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

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

WBOYoriginal: 2016-05-16 15:25:591143parcourir

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>

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

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

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

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,

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Compétences SeaJS_javascript pour le développement modulaire JavaScriptArticle suivant：Compétences SeaJS_javascript pour le développement modulaire JavaScript

Articles Liés

Voir plus