本文為大家分享了jQuery點擊按鈕彈出遮罩層且內容居中的特效，下面來看最終實現的效果：
由于是測試的程序，所以我未加關閉的按鈕。
一、主體程序
<!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>
二、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;}三、JS程序
這個才是本次隨筆所說的重點，下面來看一段錯誤的JS程序：
$(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(); }) })上面這段程序看起來沒有問題，那么來看一下輸出的結果：
實際測量的時候上下的間距是不一致的。
那么正確的JS程序是：
$(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 });}從上面程序可以看出在遮罩層彈出顯示以后再執行一個函數動態的設置彈出層的背景大小和距離頁面的上間距和左間距，而不是一開始加載JS時就已經設置好彈出層各項參數。
以上就是本文的全部內容，教大家如何實現點擊按鈕彈出遮罩層且內容居中的效果，
新聞熱點
疑難解答
