之前做了一個頁面,在點選了某個按鈕之後,要求頁面出現一個全屏遮罩,一開始使用了position:absolute來實作的。當時因為畫面大小是固定的,不可以resize的,是以,沒有發現問題。
最近用了同樣的做法做了一個遮罩,但是畫面是可以進行resize的,是以就發現了一個問題,當畫面被reisze到浏覽器出現了滾動條的時候,就發現,用absolute 的做法是有問題的。後來改成fixed定位就沒有問題了。
以下為測試代碼 ,有興趣的童鞋可以試試看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mask</title>
<style>
body {
height: 1000px;
}
.mask1 {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
display: none;
background: rgba(0, 0, 0, 0.4);
}
.mask2 {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
display: none;
background: rgba(0, 0, 0, 0.4);
}
</style>
<script>
document.onclick = function(e) {
var id = e.srcElement.id;
if(id != "mask1" && id != "mask2") {
document.querySelector(".mask1").style.display = "none";
document.querySelector(".mask2").style.display = "none";
}
};
window.onload = function(){
document.querySelector("#mask1").onclick = function(e) {
document.querySelector(".mask1").style.display = "block";
};
document.querySelector("#mask2").onclick = function(e) {
document.querySelector(".mask2").style.display = "block";
};
};
</script>
</head>
<body>
<div class="divcss5">
<button id="mask1" type="button">mask1</button>
<button id="mask2" type="button">mask2</button>
</div>
<div class="mask1"></div>
<div class="mask2"></div>
</body>
</html>