Rumah > Artikel > hujung hadapan web > jQuery mengklik butang untuk muncul lapisan topeng dan memusatkan kandungan dengan special effects_jquery

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

WBOYasal: 2016-05-16 15:25:591143semak imbas

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>

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

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

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

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,

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kemahiran SeaJS_javascript untuk pembangunan modular JavaScriptArtikel seterusnya：Kemahiran SeaJS_javascript untuk pembangunan modular JavaScript

Artikel berkaitan

Lihat lagi