带遮罩层的弹框的实现(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
大家如果有什么好的方法，欢迎留言~~
2421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
