zoukankan      html  css  js  c++  java
  • 原创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);
        }
        
    }

  • 相关阅读:
    二分题目
    求最小公倍数的最简模板
    用 vue 脚手架 vue-cli 初始化(新建)项目
    电脑没有声音
    node.js 安装步骤
    phpStrom编辑器 通过 git 提交代码到 gitlab
    jq 实现头像(气泡式浮动)
    微信网页授权 、获取用户昵称 头像等信息
    秒格式化 “秒” 为 天 时 分 秒
    改变swiper 按钮swiper-button-next 颜色
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/1898930.html
Copyright © 2011-2022 走看看