弹窗关闭后不会重新打开

Question

我有一个打开弹出窗口的 div“按钮”。 当您单击弹出窗口时，它会运行

function theFunctionAbout() {
    var popup = document.getElementById("thePopupAbout");
    popup.classList.add("show");
    
  }

并且会加上show，也就是visibility:visible; 当您单击弹出窗口中的按钮时，它会运行

function theFunctionAboutClose(){
    var popup = document.getElementById("thePopupAbout");  
    popup.classList.add("hide");
  }

并且它会添加 hide，运行 display:none;。

点击按钮后，弹出窗口关闭，但再也不会打开。 我该如何解决？

我试过将 add.("hide") 切换为 remove.("show")。 这适用于另一个弹出窗口，其中弹出窗口 window 是潜水表单元素的一部分，并且该弹出窗口可以重新打开，但是，我的弹出窗口 window 有一个段落元素。 当我尝试在我的关于弹出窗口上执行 remove.("show") 时，该按钮不会关闭 window。

我的按钮：

<div class="aboutPopup" onclick="theFunctionAbout()">About
        <p class="aboutPopupText" id="thePopupAbout">
            <span class="aboutPopupInfo">
                Mathalassa is a fun and educational math game that offers students from varying ages and grades to learn and perfect their math skills.
            </span>

            <button class="aboutPopupClose" onclick="theFunctionAboutClose()">x</button>
        </p>
    </div>

另一个按钮：

<div class="oldUserPopup" onclick="theFunctionOld()">Old User 
        <form class="oldUserPopupText" id="thePopupOld">
            <label class="oldUserPopupInfo" for="name">Please Enter Your Username:</label>

                <div class="form-grp">
                    <input class="inputNameHere" type="text" name="username" id="user" required minlength="2" maxlength="15" size="10" >
                </div>

                <div class="form-grp">
                    <input class="inputSubmit" type="Submit" name="login-btn" id="user">
                </div>

            <button class="oldUserPopupClose" onclick="theFunctionOldClose()">x</button>

        </form>
    </div>

Answer 1

您可以使用element.classList.toggle("hide");而不是使用两种不同的功能来打开/关闭弹出窗口这将为每个 class 的 css 的层次结构带来更少的问题

Answer 2

当您使用 add 方法时，您将 class 附加到现有类。
假设您已经多次显示和隐藏该元素，您的元素 className 字符串将如下所示：
class="...other_classes show hide show hide show hide"
你不希望这样，所以用以下内容替换两个 function 所以当你添加 hide class 你将删除 show 等等......

function theFunctionAbout() {
    var popup = document.getElementById("thePopupAbout");
    popup.classList.remove("hide");
    popup.classList.add("show");
  }

function theFunctionAboutClose(){
    var popup = document.getElementById("thePopupAbout");  
    popup.classList.remove("show")
    popup.classList.add("hide");
  }