jQuery mengklik butang untuk muncul lapisan topeng dan memusatkan kandungan dengan special effects

jQuery mengklik butang untuk muncul lapisan topeng dan memusatkan kandungan dengan special effects_jquery

WBOY

Lepaskan： 2016-05-16 15:25:59

asal

1184 orang telah melayarinya

Artikel ini berkongsi dengan anda kesan khas jQuery apabila mengklik butang untuk memunculkan lapisan topeng dan memusatkan kandungan Mari kita lihat kesan akhir:

Memandangkan ia adalah program ujian, saya tidak menambah butang tutup.
1. Program utama

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

Salin selepas log masuk

2. Gaya 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;
}

Salin selepas log masuk

3. Program JS
Ini adalah fokus esei ini. Mari kita lihat program JS yang salah:

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

Salin selepas log masuk

Program di atas nampaknya baik, jadi mari kita lihat pada output:

Jarak atas dan bawah tidak konsisten semasa pengukuran sebenar.

Maka program JS yang betul ialah:

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

Salin selepas log masuk

Seperti yang dapat dilihat dari program di atas, selepas lapisan topeng muncul, fungsi dilaksanakan untuk menetapkan saiz latar belakang lapisan pop timbul secara dinamik dan jarak atas dan kiri halaman, bukannya menetapkan pop timbul apabila JS pertama kali dimuatkan.

Di atas ialah keseluruhan kandungan artikel ini, mengajar anda cara mencapai kesan mengklik butang untuk muncul lapisan topeng dan memusatkan kandungan,