jquery蒙版控件實現(xiàn)代碼
更新時間：2010年12月08日 15:47:15 作者：
jquery蒙版控件實現(xiàn)代碼，學(xué)習(xí)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.調(diào)用方法
var obj=new MaskControl();
//顯示蒙版提示信息
obj.show("顯示的提示信息");
//隱藏蒙版提示信息
obj.hide();
//顯示提示信息，并隔timeOut(1000代表1秒)自動關(guān)閉
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);
}
}
復(fù)制代碼 代碼如下:
#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控件代碼：
復(fù)制代碼 代碼如下:
/**
蒙版信息控件
用法：
1.引用 mask.css
2.引用 mask.js
3.調(diào)用方法
var obj=new MaskControl();
//顯示蒙版提示信息
obj.show("顯示的提示信息");
//隱藏蒙版提示信息
obj.hide();
//顯示提示信息，并隔timeOut(1000代表1秒)自動關(guān)閉
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);
}
}
相關(guān)文章
jQuery取得設(shè)置清空select選擇的文本與值
這篇文章主要介紹了jQuery如何取得設(shè)置清空select選擇的文本與值,下面有個不錯的示例，需要的朋友可以參考下2014-07-07
本文主要分享了將鼠標焦點定位到文本框最后的實例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
一個小圖標特效，非常有趣的，下面給大家分享基于jquery制作的小圖標上下滑動特效，代碼簡單易懂，需要的朋友參考下
2017-01-01 
JavaScript和JQuery實用代碼片段，喜歡學(xué)習(xí)jquery的朋友可以參考下。
2010-04-04 
JQuery是非常棒的JS類庫，有豐富的UI庫和插件，不過我鐘愛他的是他的選擇器，感覺其他功能有時跟后臺人員距離很遠，所以一般我也只使用一下他的選擇器。
2009-08-08 
這篇文章主要介紹了基于jQuery實現(xiàn)最基本的淡入淡出效果的方法,實例分析了jQuery中hide、show、toggle等函數(shù)的使用技巧,需要的朋友可以參考下
2015-02-02 
這篇文章主要介紹了jQuery的$.proxy()應(yīng)用,需要的朋友可以參考下
2014-04-04 
Javascript 使用ajax與C#獲取文件大小實例詳解
本文章向碼農(nóng)們介紹了js ajax獲取文件大小的實例,涉及JavaScript調(diào)用ajax交互及后臺C#文件操作的相關(guān)技巧,需要的朋友可以參考下
2017-01-01 
也許有時你需要在網(wǎng)站上播放一些音頻和視頻文件，也許你正在建立一個在線社區(qū)需要有分享和播放音樂和視頻的功能。下面介紹的這些免費jQuery插件也許有你需要的。
2014-11-11