前端小記2（遮罩層）
阿新 • • 發佈：2018-12-11
瀏覽網頁時點選登入彈出登入框後，之前的網頁會被虛化，這是遮罩層在發揮作用。
實現方式如下（重點配置遮罩層）：
1.在網頁html中加上一個遮罩層的div，如：<div class="overCurtain"> </div>和登入框
2.設定遮罩層css：
.overCurtain {
border-top:1px solid rgb(230,245,255);
position:absolute;
height:100%;
width:100%;
left:0px;
top:0px;/*從左上角開始，覆蓋整個頁面*/
opacity:0.7; /*透明度*/
background-color:#999;
z-index: 100;/*層，重疊時大的優先顯示，預設為0。登陸框可以設為101*/
display: none;/*開始不顯示*/
}
3.設定遮罩層&登入框 js
$(function(){
$("#login").click(function () { //顯示登陸框和遮罩層，且登陸框覆蓋部分遮罩層，因為兩個z-index屬性101>100
$(".hide-center").fadeIn("slow");
$(".overCurtain").fadeIn("slow");
})
$("#close").click(function () { //關閉登陸框，返回原頁面
$(".hide-center").fadeOut("fast")
$(".overCurtain").fadeOut("slow")
})
})