Jquery实现遮罩层

文档背景

SSH项目,需要用到Jquery,记录一下.

写入js

// 遮罩层
var MaskUtil = (function () {
    var $mask, $maskMsg;
    var defMsg = '正在处理，请稍待。。。';
    function init() {
        if (!$mask) {
            $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");
        }
        if (!$maskMsg) {
            $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">" + defMsg + "</div>")
                .appendTo("body").css({'font-size': '12px'});
        }
        $mask.css({width: "100%", height: $(document).height()});
        $maskMsg.css({
            left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2,
        });
    }
    return {
        mask: function (msg) {
            init();
            $mask.show();
            $maskMsg.html(msg || defMsg).show();
        }
        , unmask: function () {
            $mask.hide();
            $maskMsg.hide();
        }
    }
}());

写入当前页面Style

.datagrid-mask-msg {

    position: absolute;

    top: 50%;

    margin-top: -20px;

    padding: 12px 5px 10px 30px;

    width: auto;

    height: 16px;

    border-width: 2px;

    border-style: solid;

    display: none;

}

遮罩层开启

MaskUtil.mask("开启遮罩");

遮罩层关闭

MaskUtil.unmask("关闭遮罩");