遮罩層的處理（三種方式）

-1.第一種（樣式控制頁面遮罩層）缺點：不能點擊消失

Css:

 

 

/*遮罩層的樣式1*/
/*.loading-shade {
position: fixed;
background: rgba(0, 0, 0, .3);
z-index: 102000000000000;
height: 100%;
width: 100%;
top: 0;
left: 0;
}*/

 

Js:

 

 

 

 

 

 

 

 

////添加頁面遮罩
//function addShade() {
// var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
// $("body").append('<div class="loading-shade"></div>');
// //$(".loading-shade").css("height",htmlHeight+"px");
// $(".loading-shade").css("100%");
//} /*刪除頁面遮罩*/
//function removeShade() {
// $(".loading-shade").remove();
//}

 

 

 

 

 

 

-2.第二種（div控制頁面遮罩層）可點擊消失

Css:

 

 

 

 

 

/*遮罩層的樣式2*/
/*.div-a {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 102000000000000;
background: rgba(0, 0, 0, .3);
}

.img-div {
position: relative;
top: 40%;
margin: 0 auto;
width: 300px;
height: 100px;
text-align: center;
color: #fff;
}

.loading {
display: inline-block;
font-size: 28px;
margin-left: 40px;
line-height: 28px;
margin-top: 36px;
}*/

<!--<div class="div-a" style="display: none;" id="addShade">
<div class="img-div">
<span class="loading">加載中...</span>
</div>
</div>-->

 

 

 

Js:

 

 

 

 

 

 

-3.第三種（Element的頁面遮罩層）

Js：