Question

我有一个模态代码here的示例。

当模态打开时，我无法弄清楚代码的哪一部分会使背景变暗，请给我任何提示，谢谢。

Answer 1

让我们来看看你的.modal css！

.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); /* <-- this is the culprit */
}

background-color: rgba(0,0,0,0.4);是背景灰显的原因。如果停用那个，或者使用更亮的rgba覆盖它，将删除暗色效果（例如，要删除灰色效果并使用完全透明的黑色重置它，请设置background-color: rgba(0,0,0,0)）。

rgba(0,0,0,0.4)表示黑色（rgb(0,0,0)），但不透明度仅为40％（最后为0,4）。

模态显示暗叠加层的原因是因为background-color设置为深色，并且模态的width和height设置为{{1} }。因此，模态的背景实际上是整个屏幕的高和宽，并且具有在内联CSS中设置的颜色。因此，无论何时激活模态（通过单击按钮），都会显示全屏暗覆盖。

Answer 2

具有黑色和不透明度的div是什么产生效果，即

<div id="myModal" class="modal">

此div在默认情况下是隐藏的（通过display: none），当用户点击“打开模态”按钮时，它会被JavaScript显示。

为什么当我的模态打开时，背景变暗了？

2 个答案: