html - CSS 模态后退不会占据整个屏幕

Question

我希望我的 CSS 模态背景占据整个屏幕(即除了模态内容本身之外，整个屏幕都被遮盖)。我认为这可能与我根据 vh 和 vw 赋予其他 div 宽度和高度有关。这是我的代码:

#modal {
  z-index: 1;
  position: fixed;
  left: 40%;
  right: 30%;
  top: 10%;
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
}

#modal button {
  height: 40px;
  font: Hind Siliguri;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 5px;
  margin: 5px;
}

<span id="modal">
    <h2>Choose a word: </h2>
    <button id = "choice1">Word1</button><button id= "choice2">Word2</button><button id = "choice3">Word3</button>
  </span>

以下是我根据 vw/vh 分配维度的其他元素:

#verbal-hint-container{
  margin-right: 50%;
  height: 30vh;
  width: 40vw;
  background-color: #C3D898;
  border: 5px solid #160F29;
  border-radius: 2px;
}

verbal-hint-container 只是一个包含实例化消息(来自 mustache 库)的 div。

我的直觉是，根据 vw/vh 分配其他元素尺寸会干扰使元素跨越整个屏幕吗？有解决方法吗？如果重要的话，我的模式的 css+html 在这些文件中比所有其他元素的 css+html 出现得晚。

Answer 1

1. 在 #modal 上，高度 和 宽度 使用 = 而不是 : 这就是它无法正常工作的原因。将您的 #modal CSS 更改为:

   #modal {
     z-index: 1;
     position: fixed;
     left: 40%;
     right: 30%;
     top: 10%;
     display: none;
     background-color: rgb(0, 0, 0);
     background-color: rgba(0, 0, 0, 0.4);
     width: 100vw;
     height: 100vh;
   }
   

如果您的目标是覆盖整个屏幕。这只会导致模态框被放置在错误的位置。

不太确定你想在这里实现什么，但我建议在调试/创建新组件/ block 时先删除/注释掉 display: none