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超出了视野，就把它取出了。

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

最好的方法

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);
});

弹出窗口曾经显示在网页上，但不再显示

3 个答案: