基于bootStrap做的一个等待层

最新推荐文章于 2024-09-10 10:13:42 发布

原创最新推荐文章于 2024-09-10 10:13:42 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

bootstrap

6 篇文章

订阅专栏

本文介绍了如何利用BootStrap框架创建一个等待层。内容包括js代码实现和css样式设置，同时强调需先引入BootStrap的相关文件。

js代码：


/**
 * 说明：数据进行加载时的遮罩层，基于bootstrap的页面模态框做封装处理
 * 使用方法:
 * 开启:MaskUtil.mask();
 * 关闭:MaskUtil.unmask();
 */
var MaskUtil = (function(){
    var $mask,$maskMsg;
    var defMsg = '正在处理，请稍等。。。';
    function init(){
        if(!$mask){
            $mask = $("<div id=\"myWaitingModal\" class=\"modal fade\" data-keyboard=\"false\" data-backdrop=\"static\" data-role=\"dialog\" " +
                "aria-labelledby=\"myWaitingModalLabel\" aria-hidden=\"true\">" +
                "<div id=\"loading\" class=\"loading\">"+defMsg+"</div> </div>").appendTo("body");
        }
    }
    return {
        mask:function(){
            init();
            $('#myWaitingModal').modal('show');
        }
        ,unmask:function(){
            $('#myWaitingModal').modal('hide');
            $mask = null;
            $('#myWaitingModal').remove();
            $('.modal-backdrop').hide();
        }
    }
}());

css代码


.loading {
    width: 250px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0px 0px -125px;
    line-height: 56px;
    color: #fff;
    padding-left: 60px;
    font-size: 12px;
    background: #000 url(../static/imgs/waiting.gif) no-repeat 10px 50%;
    opacity: 0.7;
    z-index: 9999;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

图片：