前端小結（3）---- 添加遮罩層，並彈出div

有以下div：

<div id='pop-div' class="pop-box">
    <div class="input-group has-info">
        <input class="form-control" id="bankCode" type="text" placeholder="請輸入銀行卡號" />
        <span class="input-group-addon" id="checkBtn" ng-click="checkBtn()"><i class="searchicon fa fa-credit-card"></i> 銀行卡校驗</span>
    </div>
</div>

調用一下方法彈出該div

//遮罩層
function popupDiv(div_id) {
    divid = div_id;
    var div_obj = $("#" + div_id);
    var windowWidth = document.body.clientWidth;
    var windowHeight = document.body.clientHeight;
    var popupHeight = div_obj.height();
    var popupWidth = div_obj.width();
    //添加並顯示遮罩層
    $("<div id='mask'></div>").addClass("mask")
                              .width("100%")
                              .height("100%")
                              .click(function () { hideDiv(div_id); })
                              .appendTo("body")
                              .fadeIn(200);
    div_obj.css({ "position": "absolute" })
           .animate({
               left: windowWidth / 2 - popupWidth / 2,
               top: windowHeight / 2 - popupHeight / 2, opacity: "show"
           }, "slow");
}

function hideDiv(div_id) {
    $("#mask").remove();
    $("#" + div_id).animate({ left: 0, top: 0, opacity: "hide" }, "slow");
    $("#bankCode").val("");
}

對應css代碼：

.pop-box {
    z-index: 9999; /*這個數值要足夠大，纔可以顯示在最上層*/
    margin-bottom: 3px;
    display: none;
    position: absolute;
    background: #FFF;
    border: solid 1px #EAEAF3;
    top: 185px !important;
}

.pop-box-body {
    clear: both;
    margin: 4px;
    padding: 2px;
}

.mask {
    background-color: rgba(234, 237, 248, 0.8);
    position: absolute;
    top: 0px;
    left: 0px;
    filter: Alpha(Opacity=60);
}

.input-group {
    width: 1000px;
    height: 45px;
}

.form-control {
    height: 45px;
}