需要什么:当用户点击链接时,背景必须变暗,并且应该在前景中显示一个带有一些数据的框
问题:背景上的不透明度有效,但内容应用了不透明度;我试图为第二个 div 设置 100% 的不透明度,但它似乎不起作用。
<style>
.displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:grey;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
.displaybox_content{
filter: alpha(opacity=100); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE */
-moz-opacity: 1; /*older Mozilla*/
-khtml-opacity: 1; /*older Safari*/
opacity: 1; /*supported by current Mozilla, Safari, and Opera*/
position:fixed;
z-index: 1001;
top:50%;
left:50%;
width:947px;
height:566px;
margin-top: -288px; /* set to a negative number 1/2 of your height*/
margin-left: -473px; /* set to a negative number 1/2 of your width*/
background-image: url(images/bg3.png);
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
<div id="displaybox" class ="displaybox" style="display: none;">
<div id="displaybox_content" class ="displaybox_content"></div>
</div>
<a href='#' onclick='return clicker();'>Open Window</a>