Question

这是我在这里的第一个问题，我现在已经尝试搜索了一段时间，但我没有发现任何与我的问题相同或触及同样问题的问题。

我想做一个CSS弹出窗口，其中有一个覆盖整个网站的background-div和一个显示实际内容的居中div。

我的问题是，当我点击应该同时显示它们的按钮时，只显示居中的div。即使我在我的css文件中注释掉display:none - 属性，背景div也没有附加任何颜色或样式。如果我用文本填充它，如果没有附加任何样式表，则文本显示在div“应该”的网站上。

我已经在coder中获得了this question的答案中的代码。

这是：

脚本：

$("#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;
}

Here's the fiddle-demo so you can play around as well

我已经尝试更改属性，将它们注释掉，使div从get go中可见，但它似乎总是无法正常显示（而white_content总是这样做）。

另外： JS-fiddle在显示白色内容方面遇到问题，但删除display:none属性时黑色叠加显示正常。

非常感谢你提前帮助。已经卡住了一段时间

Answer 1

您需要在jsfiddle http://jsfiddle.net/dhana36/K57DH/12/

中附加jquery plugin

更新后http://jsfiddle.net/dhana36/K57DH/20/

<强>更新

HTML CODE：

<!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>

Answer 2

在关闭</body>之前添加脚本而不是</head>内部相同的代码在head内部包含时不起作用 http://jsfiddle.net/K57DH/18/ 在左侧面板中修改

将显示从块更改为无，显示div的问题

2 个答案: