jquery特效（7）—彈出遮罩層且內容居中

時間 2019-11-11

原文原文鏈接

上週寫了幾個小特效，其中有個點擊按鈕彈出遮罩層的特效，下面來看最終實現的效果：javascript

因爲是測試的程序，因此我未加關閉的按鈕。css

1、主體程序html

<!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>
        <section class="testCont">
                這裏是彈出的內容測試
        </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樣式java

*{
    margin: 0;
    padding: 0;
}
.testBg{
    position: fixed;      /*考慮主體內容可能過多出現豎直滾動條，建議用fixed*/
    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 ;                 
}
.testCont{
    position: fixed;  /*考慮主體內容可能過多出現豎直滾動條，建議用fixed*/
    top: 0;
    left: 0;
    width:200px;
    border: 1px #ffc700 solid;
    color: #ffc700;
    display:none ; 
}

3、JS程序jquery

這個纔是本次隨筆所說的重點，下面來看一段錯誤的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();

$(".testCont").show();

}) })

上面這段程序看起來沒有問題，那麼來看一下輸出的結果：函數

實際測量的時候上下的間距是不一致的，通過師父的指點才知道是瀏覽器渲染的結果，具體的原理請看這篇文章：http://www.cnblogs.com/lhb25/p/how-browsers-work.html測試

那麼正確的JS程序是：spa

$(function(){
    $(".testBg").height($(window).height()).width($(window).width());//使遮罩的背景覆蓋整個頁面
    
    $(".testButton").click(function(){
        $(".testBg").show();
        $(".testCont").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時就已經設置好彈出層各項參數。scala

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。