JQuery+CSS3實現封裝彈出登錄框效果

上次發了一篇使用Javascript來實現彈出層的效果，這次剛好用了JQuery來實現，所以順便記錄一下：

因為這次使用了Bootstrap來做一個項目，但是由於不使用Bootstrap自帶的JS插件，所以這個彈出登錄框就自己實現封裝來調用，做出來的效果其實和Bootstrap自帶的效果差不多。OK，看一下效果圖：

其實很簡單，首先是html結構：

<div id="mask"></div>     <!-- 半透明遮罩層 -->
<div id="login">
       <h3>彈出層標題</h3>
       <div class="loginCon">
                 表單內容
        </div>
</div>

然后先設置一下css樣式：

#mask{ 
    background-color:#000;
    opacity:0.5;
    filter: alpha(opacity=50); 
    position:absolute; 
    left:0;
    top:0;
    z-index:9998;
    display:none;
}
#login{ 
    position:fixed;
    width:400px;
    z-index:9999;
    background-color:#fff;
    border-radius:15px;
    box-shadow:0 3px 4px #eee;
    display:none;
}

應該很容易理解吧，一般先將樣式設置好，然后再添加display：none;將其默認隱藏，然后，我們通過JQuery來獲取並計算遮罩層的寬高和登錄框的水平垂直居中位置的top/left值。

這里我將實現登錄框效果封裝成一個函數：

//彈出層
function openDialog(id,className)
{
    var mask = $('#mask');
    var login = $('#'+id);
    var sWidth = $(document.body).outerWidth(true);   //獲取窗口文檔body的總寬度，包括border和padding
    var sHeight = $(document.body).outerHeight(true);   //獲取窗口文檔body的總高度，包括border和padding
    var cHeight = $(window).height();                 //獲取瀏覽器窗口的可視區高度
    var lWidth = login.width();                     //登錄框的寬度
    var lHeight = login.height();                  //登錄框的高度
    var left = (sWidth - lWidth) / 2;              //計算登錄框的left值：等於總寬度減去登錄框寬度再除以2
    var top = (cHeight - lHeight) / 2;             //計算登錄框的top值：等於可視區高度減去登錄框高度再除以2
    mask.css({
        'display': 'block',
        'width': sWidth + 'px',
        'height': sHeight + 'px'
    });
    login.css({
        'display': 'block',
        'top': top + 'px',
        'left': left + 'px'
    }).addClass('animated zoomInDown');          //添加動畫類

    $('.' + className).click(function () {  
        close();
    });
    mask.click(function () {
        close();
    });

    //隱藏遮罩層和登錄框
    function close() {
        mask.css('display', 'none');
        login.css('display', 'none');
    }
    return false;
}

其中，函數參數中 id 指的是登錄框的id值，而 className 是關閉按鈕的類名，為什么不是id值而是類名呢，我的考慮是一個登錄框可能不止一個關閉取消按鈕，所以用類名更直接。

接下來就是通過事件調用此函數：

//登錄注冊
$('#btnLogin').click(function () {
    openDialog('login', 'close');
    return false;
});

點擊你設置的登錄注冊按鈕來實現彈出層效果，傳入你的登錄框ID值 和 取消關閉按鈕的類名即可，至於怎么命名就看你用於什么了，這里實現的是登錄框。

這里當點擊登錄按鈕的時候，我添加了動畫效果，讓登錄框出來的時候是彈出來的。我使用的是animate.css里的一個效果 zoomInDown，但由於我只用這一個效果，所以不需要引入整個animate.css文件，直接拿里面zoomInDown對應的樣式規則就行，如果zoomInDown效果的代碼為：

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation: zoomInDown 1s both;
          animation: zoomInDown 1s both;
}

這些效果自己寫確實比較耗時，所以直接拿來用確實很方便。自己想要什么效果可以去animate.css動畫庫那里選一個喜歡的，然后拿對應的代碼即可。

OK，這樣就實現一開始的效果了。