Fatal编程技术网
  • javascript/
  • Javascript 将显示从block更改为none，显示div时出现问题

Javascript 将显示从block更改为none，显示div时出现问题

javascript jquery css html

Javascript 将显示从block更改为none，显示div时出现问题,javascript,jquery,css,html,Javascript,Jquery,Css,Html,这是我在这里的第一个问题，我已经尝试搜索了很长一段时间，但我没有发现任何与我的问题相同或涉及相同问题的问题 我想做一个CSS弹出窗口，有一个覆盖整个网站的背景div和一个显示实际内容的中心div 我的问题是，当我单击应该同时显示两者的按钮时，只有居中的div出现。即使我注释掉css文件中的display:none-属性，背景div也没有任何颜色或样式。如果我用文本填充它，文本会显示在网站上，如果没有附加任何样式表，div应该在那里 我已经从他的答案中得到了密码 这是： 脚本： $("#btn-u

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

我想做一个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";
});

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

.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;
}
html:

$("#btn-update").click(function() {
        document.getElementById("light").style.display="block";
        document.getElementById("blackground").style.display="block";
});

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

.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_内容总是这样）

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

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

您需要在JSFIDLE中附加
jquery插件

更新后

更新：

$("#btn-update").click(function() {
        document.getElementById("light").style.display="block";
        document.getElementById("blackground").style.display="block";
});

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

.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;
}
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>


.黑色覆盖层{
/*显示：无*/
位置：绝对位置；
排名前10%；
左：10%；
宽度：50%；
身高：50%；
背景色：#000000；
z指数：1001；
/*-moz不透明度：0.8*/
/*不透明度：.80*/
/*过滤器：α（不透明度=80）*/
}
.white_内容{
显示：无；
位置：绝对位置；
最高：25%；
左：25%；
宽度：15%；
身高：15%；
填充：16px；
边框：16px实心橙色；
背景色：白色；
z指数：1002；
溢出：自动；
}
$（文档）.ready（函数（）{
$（“#btn更新”）。单击（函数（）{
document.getElementById（“light”）.style.display=“block”；
document.getElementById（“blackground”）.style.display=“无”；
//document.getElementById（“blackground”）.style.background color=“#555555”；
});
});
这是lightbox内容。
按钮
在关闭前添加脚本
不在
内
如果将相同的代码包装在
头中


在左侧面板中编辑
您应该选择jquery库作为框架（下拉左侧）才能使用它。谢谢，现在它可以在fiddle中使用了。但不是在我的chrome浏览器中。有什么想法吗？这只是浏览器中的一个问题吗？我在chrome中检查了你的代码。工作正常。@Avslutarn他们的意思是将
放在
中。我的部分包含了jquery脚本。但由于某些原因，背景仍然不会出现@达纳：我很想去，但我还在广场上one@Avslutarn在chrome浏览器中运行页面，然后按F12并打开控制台。它给出了任何错误，请粘贴它。