将显示从块更改为无，显示 div 时出现问题答案

【问题标题】：Changing the display from block to none, Problems in showing div将显示从块更改为无，显示 div 时出现问题
【发布时间】：2026-02-16 10:05:01
【问题描述】：

这是我在这里的第一个问题，我已经尝试搜索了很长时间，但我没有找到任何与我相同或涉及相同问题的问题。

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

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

我已经从coders 的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 从一开始就可见，但它似乎总是无法正确显示（而 white_content 总是如此）。

另外： JS-fiddle 在显示白色内容时出现问题，但当您删除 display:none 属性时，黑色叠加层显示得很好。

提前非常感谢您的帮助。卡了好久了

【问题讨论】：

您应该选择 jquery 库作为框架（下拉左侧）才能使用它。

标签： javascript jquery css html

【解决方案1】：

你需要在 jsfiddle http://jsfiddle.net/dhana36/K57DH/12/ 中附加jquery plugin

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

更新：

HTML 代码：

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

【讨论】：

谢谢，现在它可以在小提琴中使用了。但不是在我的 chrome 浏览器中。有任何想法吗？这只是其中一个浏览器问题之一，它可以在一个问题中运行，但不能在另一个问题中运行？
我在 chrome 中检查了你的代码。它工作正常。
@Avslutarn 他们的意思是把<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>放在你的<head>中。
我的部分中包含 jquery 脚本。但是由于某种原因，背景仍然不会出现。 @dhana 我想，但我仍然在第一方
@Avslutarn 在 chrome 浏览器中运行页面并按 F12 并打开控制台。它给出任何错误请粘贴它。

【解决方案2】：

在关闭</body> 之前添加脚本不在</head> 中，包裹在head 中时相同的代码不起作用 http://jsfiddle.net/K57DH/18/ 在左侧面板中编辑

【讨论】：