基于bootStrap做的一个等待层

最新推荐文章于 2024-06-16 09:35:21 发布

白不懂黑的静

最新推荐文章于 2024-06-16 09:35:21 发布

阅读量1.4k

点赞数

分类专栏： js bootstrap

本文链接：https://blog.csdn.net/yyj108317/article/details/105809708

版权

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

摘要由CSDN通过智能技术生成

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');
        }