前端小结（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:; /*这个数值要足够大，才能够显示在最上层*/
    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;
}