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只是一個包含實例化消息的div（來自髭庫）。

我的直覺是基於vw / vh分配其他元素尺寸會干擾使元素跨越整個屏幕嗎？ 有沒有解決方法？ 如果這很重要，那么我的模式的css + html出現在那些文件中的時間要比其他所有元素的css + html出現的時間晚。

Answer 1

使用Inspect元素為我們提供了一種方法來查找引導程序正在使用的類。

嘗試將以下CSS添加到您的頁面：

.reveal-modal-bg {
    width: auto !important;
    position: fixed;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    z-index: 40;
}

添加此代碼應確保背景完全覆蓋整個頁面。

Answer 2

我不知道我是否正確回答了您的問題。 但是，這是一個示例，其中模式背景占據了屏幕的100％。 我希望這能幫到您。

 var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

 /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

 <!DOCTYPE html> <html> <head> </head> <body> <h2>Modal Example</h2> <button id="myBtn">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div> </body> </html>

Answer 3

在#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; }

如果您的目標是掩蓋整個屏幕，則無需#modal上的left ， right和top 。 這只會導致將模態放置在錯誤的位置。

不太確定要在此處實現的目標，但是我建議刪除/注釋掉顯示內容：在調試/創建新組件/塊時不首先這樣做

CSS模式后退不會占據整個屏幕

問題描述

3 個解決方案

解決方案1
0 2019-08-13 02:30:27

解決方案2
0 2019-08-13 02:36:47

解決方案3
0 已采納 2019-08-13 02:44:20

CSS模式后退不會占據整個屏幕

問題描述

3 個解決方案

解決方案1 0 2019-08-13 02:30:27

解決方案2 0 2019-08-13 02:36:47

解決方案3 0 已采納 2019-08-13 02:44:20

解決方案1
0 2019-08-13 02:30:27

解決方案2
0 2019-08-13 02:36:47

解決方案3
0 已采納 2019-08-13 02:44:20