原创jquery蒙版控件

最新推荐文章于 2021-07-08 13:33:50 发布

weixin_33919950

最新推荐文章于 2021-07-08 13:33:50 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yg_zhang/archive/2010/12/07/1898930.html

本文介绍了一种自定义蒙版控件的方法，包括样式代码和JavaScript代码。该控件可以显示加载提示信息并自动隐藏，适用于网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式代码：

代码

#div_maskContainer
{
    display: none;
}
/*蒙版样式*/
#div_Mask{
    z-index:1000;
    filter:alpha(opacity=40);
    position: absolute;
    left:0px;
    top:0px;
    background-color: #D4D0C8;
}
/*显示信息样式*/
#div_loading{
    width:300px;height: 60px;position: absolute;
    border: 1px outset #B4E0F2;
    padding-top: 40px;
    text-align: center;
    background-color: #CCE9F9;
    z-index: 10000;
    filter:alpha(opacity=100);!important
}

js控件代码：

代码

/**
蒙版信息控件
用法：
1.引用 mask.css
2.引用 mask.js
3.调用方法
var obj=new MaskControl();
//显示蒙版提示信息
obj.show("显示的提示信息");
//隐藏蒙版提示信息
obj.hide();
//显示提示信息，并隔timeOut(1000代表1秒)自动关闭
obj.autoDelayHide=function(html,timeOut)
*/
function MaskControl(){
    this.show=function(html){
        var loader=$("#div_maskContainer");
        if(loader.length==0){
            loader=$("<div id='div_maskContainer'><div id='div_Mask' ></div><div id='div_loading' ></div></div>");
            $("body").append(loader);
        }
        self.loader=loader;
        var w=$(window).width();
        var h=$(window).height();
        var divMask=$("#div_Mask");
        divMask.css("top",0).css("left",0).css("width",w).css("height",h);
        var tipDiv=$("#div_loading");
        if(html==undefined)
            html="";
        tipDiv.html(html);
        loader.show();
        var x=(w-tipDiv.width())/2;
        var y=(h-tipDiv.height())/2;
        tipDiv.css("left",x);
        tipDiv.css("top",y);
    },
    this.hide=function(){
        var loader=$("#div_maskContainer");
        if(loader.length==0) return ;
        loader.remove();
    },
    this.autoDelayHide=function(html,timeOut){
        var loader=$("#div_maskContainer");
        if(loader.length==0) {
            this.show(html);
        }
        else{
            var tipDiv=$("#div_loading");
            tipDiv.html(html);
        }
        if(timeOut==undefined) timeOut=3000;
            window.setTimeout(this.hide,timeOut);
    }

}

转载于:https://www.cnblogs.com/yg_zhang/archive/2010/12/07/1898930.html