我希望我的 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 出现得晚。
最佳答案
在 #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
关于html - CSS 模态后退不会占据整个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57470226/