用來顯示在網頁上的彈出窗口，但不再顯示

Question

我確實在其中一個網頁上彈出了一個彈出窗口，該網頁曾經在我單擊鏈接時顯示，但是在不知道更改內容的情況下，單擊鏈接似乎已停止顯示。 在Chrome中使用“檢查元素”時，正確的元素應具有“ display：block！important;”屬性。 所以應該顯示。

這是代碼片段：

 function popup() { var popup = document.getElementById("popup") var popupLayer = document.getElementById("popup-layer") popup.classList.toggle("show") popupLayer.classList.toggle("show") } 

 html, body { margin: 0; padding: 0; box-sizing: border-box; } .click { cursor: pointer; } .popup { background-color: white; height: 70%; width: 70%; display: none; position: relative; border: 1px solid; padding: 20px; z-index: 2; align-self: center; } .popup-wrapper { height: 100%; width: 100%; visibility: hidden; display: none; position: absolute; display: flex; justify-content: center; } .show { display: block !important; } .popup-layer { background-color: gray; opacity: 0.3; position: absolute; height: 100%; width: 100%; margin-top: -20px; z-index: 1; display: none; } #page-1 { background-color: #b3d9ff; height: 100vh; width: 100%; } 

 <div id="page-1"> <div id="popup-wrapper" class="popup-wrapper"> <div id="popup" class="popup center"> <a class="click" onclick="popup()">Click me!</a> </div> </div> <a class="click" onclick="popup()">Click me!</a> <div id="popup-layer" class="popup-layer"> </div> </div> 

Answer 1

這確實是一個調試問題，應該由您解決，或者至少告訴我們您的想法。

無論如何，在.popup-wrapper ，我假設height超出了視野，所以我拿出了height 。

---

 function popup() { var popup = document.getElementById("popup"); var popupLayer = document.getElementById("popup-layer"); popup.classList.toggle("show"); popupLayer.classList.toggle("show"); } 

 html, body { margin: 0; padding: 0; box-sizing: border-box; } .click { cursor: pointer; } .popup { background-color: red; height: 70%; width: 70%; display: none; position: relative; border: 1px solid; padding: 20px; z-index: 2; align-self: center; } .popup-wrapper { width: 100%; display: none; position: absolute; display: flex; justify-content: center; } .show { display: block !important; } .popup-layer { background-color: gray; opacity: 0.3; position: absolute; height: 100%; width: 100%; margin-top: -20px; z-index: 1; display: none; } #page-1 { background-color: #b3d9ff; height: 100vh; width: 100%; } 

 <div id="page-1"> <div id="popup-wrapper" class="popup-wrapper"> <div id="popup" class="popup center"> <a class="click" onclick="popup()">Click me!</a> </div> </div> <a class="click" onclick="popup()">Click me!</a> <div id="popup-layer" class="popup-layer"></div> </div> 

Answer 2

是的，多數民眾贊成在彈出包裝，這是問題的根源。 但要確保將事件放在一個元素中，則首選使用此代碼來防止重定向或使用按鈕代替

var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
  popupDiv.classList.toggle("show");
  popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
  elem.addEventListener('click',function(e){
  e.preventDefault();
  popup()},false);
});

Answer 3

CSS因此改變了這一部分

.popup-wrapper {
    height: 50%;
    width: 100%;
    display: none;
    position: absolute;
    display: flex;
    z-index: 0;
    justify-content: center;
}

JS的最佳方法

var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
  popupDiv.classList.toggle("show");
  popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
  elem.addEventListener('click',function(e){
  e.preventDefault();
  popup()},false);
});