suchen

Heim >Web-Frontend >js-Tutorial >jQuery klickt auf die Schaltfläche, um die Maskenebene einzublenden und den Inhalt mit „special effects_jquery' zu zentrieren

jQuery klickt auf die Schaltfläche, um die Maskenebene einzublenden und den Inhalt mit „special effects_jquery' zu zentrieren

WBOY
WBOYOriginal
2016-05-16 15:25:591211Durchsuche

Dieser Artikel zeigt Ihnen den jQuery-Spezialeffekt, wenn Sie auf eine Schaltfläche klicken, um die Maskenebene einzublenden und den Inhalt zu zentrieren:

Da es sich um ein Testprogramm handelt, habe ich keinen Schließen-Button hinzugefügt.
1. Hauptprogramm

<!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. CSS-Stil

*{
 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. JS-Programm
Das ist der Schwerpunkt dieses Aufsatzes. Schauen wir uns ein falsches JS-Programm an: 

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

Das obige Programm scheint in Ordnung zu sein, also werfen wir einen Blick auf die Ausgabe:

Der obere und untere Abstand stimmt während der tatsächlichen Messung nicht überein.

Dann ist das richtige JS-Programm: 

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

Wie aus dem obigen Programm ersichtlich ist, wird nach dem Popup der Maskenebene eine Funktion ausgeführt, um die Hintergrundgröße der Popup-Ebene sowie den oberen und linken Abstand der Seite dynamisch festzulegen, anstatt das Popup bei JS festzulegen werden zunächst die Layer-Parameter geladen.

Das Obige ist der gesamte Inhalt dieses Artikels und zeigt Ihnen, wie Sie durch Klicken auf eine Schaltfläche die Maskenebene öffnen und den Inhalt zentrieren können,

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：SeaJS_Javascript-Kenntnisse für die modulare JavaScript-EntwicklungNächster Artikel：SeaJS_Javascript-Kenntnisse für die modulare JavaScript-Entwicklung

In Verbindung stehende Artikel

Mehr sehen