彈窗關閉后不會重新打開

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