jQuery點擊按鈕彈出遮罩層且內容居中特效_jquery
- WBOY原創
- 2016-05-16 15:25:591143瀏覽
本文為大家分享了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時就已經設定好彈出層各項參數。
以上就是本文的全部內容，教大家如何實現點擊按鈕彈出遮罩層且內容居中的效果，
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn