[css] jquery+css 基本遮罩

基本用jquery+css  基本遮罩 ;

在需要調用的地方增加相應的方法,

缺點是若是頻繁調用容易出現遮罩層管理混亂的現象 

// css樣式 
.overlay{position: fixed; z-index: 1000;width: 100%;height: 100%;top: 0;left: 0;filter: alpha(opacity=20);opacity: 0.4;overflow: hidden;background-color: #fff;}
.content{background-color:white; position:fixed; top:50%; left:40%; z-index:1001; word-wrap: break-word; padding:3px;}
*html .overlay{ position: absolute; left: expression_r(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression_r(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
*html .content{ position: absolute; left: expression_r(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression_r(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); }
.table-load span{background:url(../images/load.gif) no-repeat; padding:5px 0px; padding-left:20px;}
.loading02{ position:fixed; _position:absolute; left:50%; top:50%; height:46px; line-height:46px; background:url(../images/load.gif) no-repeat left center; padding-left:45px; font-size:14px; color:#6b6b6b; width:170px; margin-left:-85px; margin-top:-23px;}

// jquery 實現部分 
//加載中,請等待……
function beginWait(){
	$("body").append("
加載中,請稍後 ……
"); } //取消等待效果 function endWait(){ $("#beginWaitId").remove(); } //添加基本背景遮罩 function basicShadowStart(){ $("body").append("
"); } //取消基本背景遮罩 function basicShadowEnd(){ $("#basicShadowStartId").remove(); } //添加背景遮罩之上的遮罩 function topShadowStart(){ $("body").append("
"); } //取消背景遮罩之上的遮罩 function topShadowEnd(){ $("#topShadowStartId").remove(); } function removeAllOverLay(){ $(".overlay").each(function(index){ $(this).remove(); }); }

發佈了16 篇原創文章 · 獲贊 3 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章