这是我在这里的第一个问题，我已经尝试搜索了很长时间，但我没有找到任何与我的相同或触及相同问题的问题。
我想做一个CSS弹出窗口，它有一个覆盖整个网站的背景div和一个显示实际内容的居中div。
我的问题是，当我单击应该同时显示它们的按钮时，只显示居中的div。即使我在 css 文件中注释掉了display:none- 属性，背景div 也没有附加任何颜色或样式。如果我用文本填充它，如果没有附加任何样式表，文本就会显示在div "应该"所在的网站上。
我已经从编码人员那里得到了这个问题答案的代码。
在这里：
脚本：
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="block";
});
.html：
<button type="button" id="btn-update">Button!</button>
<div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="blackground" class="black_overlay"></div>
.CSS：
.black_overlay{
/*display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background-color: #000000;
z-index:1001;
/*-moz-opacity: 0.8;*/
/*opacity:.80;*/
/*filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
这是小提琴演示，所以你也可以玩
我尝试更改属性，注释掉它们，使div 从一开始就可见，但它似乎总是无法正确显示(而white_content总是如此)。
另外：JS-fiddle 在显示白色内容时遇到问题，但是当您删除display:none属性时，黑色覆盖层显示得很好。
提前非常感谢您的任何帮助。卡了一段时间了
您需要在 jsfiddle http://jsfiddle.net/dhana36/K57DH/12/中附加jquery plugin
更新后 http://jsfiddle.net/dhana36/K57DH/20/
更新：
网页代码：
<!DOCTYPE html>
<html>
<head>
<style>
.black_overlay{
/* display: none;*/
position: absolute;
top: 10%;
left: 10%;
width: 50%;
height: 50%;
background-color: #000000;
z-index:1001;
/* -moz-opacity: 0.8;*/
/* opacity:.80;*/
/* filter: alpha(opacity=80);*/
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 15%;
height: 15%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn-update").click(function() {
document.getElementById("light").style.display="block";
document.getElementById("blackground").style.display="none";
//document.getElementById("blackground").style.background-color="#555555";
});
});
</script>
</head>
<body>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('blackground').style.display='block'">
Close
</a>
</div>
<div id="blackground" class="black_overlay"></div>
<button type="button" id="btn-update">Button!</button>
</body>
</html>
在关闭脚本之前添加脚本</body>不在</head>相同的代码包装在head内时不起作用 http://jsfiddle.net/K57DH/18/左侧面板中编辑