帶遮罩層的彈框的實現(absolute和fixed同理，以下代碼用fixed舉例)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container {
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
}
#container>div {
margin-left: 300px;
margin-top: 200px;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<button id="btn">點我按鈕</button>
<div id="container">
<div>我是遮罩層中的div</div>
</div>
<script>
document.getElementById("btn").onclick = function() {
alert("aaa");
}
</script>
</body>
</html>
這樣的話會實現一個遮罩層，正常情況下button被遮罩層遮住是不能點擊的，chrome中就無法點擊，實現了遮罩的效果，但是在ie8中，按鈕還是可以點擊的，是不起遮罩作用的。
經過測試，原因是此遮罩層無背景，在ie8中無背景無法實現遮罩。所以解決方向是給該遮罩層添加背景。
添加透明背景色
background: transparent;
經驗證，無效。ie8中透明背景和無背景是一樣的。。。添加背景色
background: #DDD;
經驗證，有效。但是從來沒見過純色遮罩層，很醜。。。添加半透明的背景圖片
這樣的問題是，ie8中對background-size屬性也不支持，所以不好適應所有屏幕。添加半透明背景色
- rgba
background: rgba(0, 0, 0, 0.4);
chrome可實現半透明，but，ie8不支持rgba。。。那好吧，濾鏡，用漸變色的濾鏡模擬半透明吧
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
事實證明，並沒什麼用，還是代替不了背景。。。 - opacity
上面半透明無法實現，那就用opacity吧。ie8不支持，還是濾鏡
background: #000;
opacity: 0.4;
filter:alpha(opacity=10);
這樣的話，遮罩層中的所有子元素都半透明瞭，經測試，ie8中的濾鏡opacity，如果遮罩層中的子元素絕對定位的話就不受父元素的影響了。chrome中不行可以用rgba
所以這樣的額。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container {
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background: rgba(0,0,0,0.4);
}
#container>div {
position: absolute;
width: 300px;
height: 150px;
top: 35%;
left: 35%;
color: #000;
background: green;
font-weight: bold;
font-size: 22px;
}
</style>
<!--[if lte IE 8]>
<style>
#container {
background: #000;
filter:alpha(opacity=40);
}
</style>
<![endif]-->
</head>
<body>
<button id="btn">點我按鈕</button>
<div id="container">
<div>我是遮罩層中的div</div>
</div>
<script>
document.getElementById("btn").onclick = function() {
alert("aaa");
}
</script>
</body>
</html>
- rgba
大家如果有什麼好的方法，歡迎留言~~