javascript - 弹出窗口用于显示在网页上，但不再显示

Question

我的一个网页上确实有一个弹出窗口，当我点击一个链接时它会显示，但是，虽然不知道发生了什么变化，但当我点击链接时它似乎已经停止显示。使用 Chrome 使用“检查元素”时，正确的元素具有属性“显示：块！重要；” 所以应该显示。

这是代码片段：

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>

标签： javascripthtmlpopup

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>