jquery蒙版控件实现代码_Javascript教程-查字典教程网
jquery蒙版控件实现代码
jquery蒙版控件实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:样式代码:复制代码代码如下:#div_maskContainer{display:none;}/*蒙版样式*/#div_Mask{z-ind...

样式代码:

复制代码 代码如下:

#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);

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类