• 原创jquery蒙版控件


    样式代码:

    代码
    #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==0return ;
            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);
        }
        
    }

  • 相关阅读:
    [CSS揭秘]不规则投影
    [CSS揭秘]规则投影
    [CSS揭秘]伪随机背景
    [CSS揭秘]复杂的背景图案
    [CSS揭秘]条纹背景
    [CSS揭秘]连续的图像边框
    Git_Eclipse:[1]Git安装插件
    Git_常用命令
    上海 day38--多表查询、python操作MySQL
    上海 day37-- MySQL 单表查询,连表操作和子查询
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/1898930.html
Copyright © 2020-2023  润新知