弹出窗口在 html/css/js 中无法正常工作答案

【问题标题】：Popup not properly working in html/css/js弹出窗口在 html/css/js 中无法正常工作
【发布时间】：2022-01-01 14:52:52
【问题描述】：

所以我在 html 中制作了一个弹出窗口。所有代码（除了css，可以在这里看到：https://codepen.io/nope99675/pen/BawrdBX）： html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./homepage.css" />
        <script src="./homepage.js" defer></script>
      </head>
      <body>
        <div>
          <div class="popup" id="popup-1">
            <div class="overlay"></div>
              <div class="content">
                <div class="closebtn" onclick="togglePopup()">&times;</div>
                  <h2>What do you want to make?</h2>
          </div>
              </div>
            <button type="button" class="Create" onclick="togglePopup()"> Create
              <span class=button__icon>
                <ion-icon name="add-outline"></ion-icon>

              </span>
            </button>
            <button type="button" class="settings"> Settings
              <span class="button__icon">
                <ion-icon name="cog-outline"></ion-icon>
              </span>
            </button>
            <button type="button" class="del"> Delete
              <span class=button__icon>
                <ion-icon name="trash-outline"></ion-icon>
              </span>
            </button>
            <button type="button" class="feed"> Feedback
              <span class="button__icon">
                <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
              </span>
            </button>
        </div>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
      </body>
</html>

js:

function togglePopup() {
    document.getElementById("popup-1").classList.toggle(active);
    
};

问题是，当我没有单击激活弹出窗口的按钮并且没有我编写的背景 (#fff) 时，它就会显示出来。角落里的关闭时间按钮不是我编码的方式。它应该是黑色背景的白色请帮助！

【问题讨论】：

您尝试过什么来解决问题？你被困在哪里了？这是 JS 问题，还是 CSS 问题？
我认为 css 可能是问题
除非 active 不是存储活动类的字符串的变量，否则应将其用引号括起来

标签： javascript html css web encoding

【解决方案1】：

我对 CSS 和 JS 做了一些更改。现在它正在工作

function showPopup() {
  debugger;
    document.getElementById("popup-1").classList.toggle("active");
}

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");

.popup .overlay {
    position: fixed;
    top:0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background: rgba(0,0,0,0.7);
    display: none;
}


.popup .content {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%) scale(0);
    background-color: #fff;
    width: 450px;
    height:220px;
    z-index: 2;
    text-align:center;
    padding: 20px;
    box-sizing: border-box
}

.popup .closebtn {
   position: absolute;
   right: 20px;
   top:20px;
   width: 30px;
   height: 30px;
   background:#222;
   color:#fff;
   font-size:25px;
   font-weight: 600;
   line-height: 30px;
   text-align: center;
   border-radius: 50%;
}

.popup.active .overlay {
    display: block;
}

.popup.active .content {
    transition: all 300ms ease-in-out;
    transform: translate(-50%, -50%) scale(1);
}


body {
    --color-primary: #595594;
    --color-other: #1a6b21;
    --color-primary-dark: #3e247a;
    --color-secondary: #252cba;
    --color-error: #990000;
    --color-secondarie: #3cca11;
    --border-radius: 5px;
    --color-better: #34994a;
    --color-setting: #81c2e7;
  
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: url(./homepage.png);
    background-position: center;
  }

.Create {
    font: 500 1.5rem "Noto Sans", sans-serif;
    background-color: var(--color-setting);
    color: #ffffff;
    border-radius: 5px;
    position: relative;
    top: -250px;
    left: -370px;
    margin: 4px 2px;
}

.settings {
    font: 500 1rem "Noto Sans", sans-serif;
    background-color: var(--color-setting);
    color: #ffffff;
    border-radius: 5px;
    position: relative;
    top: -200px;
    left: -490px;
}

.del {
    font: 500 1rem "Noto Sans", sans-serif;
    background-color: var(--color-setting);
    color: #ffffff;
    border-radius: 5px;
    position: relative;
    top: -150px;
    left: -590px;
}

.feed {
    font: 500 1rem "Noto Sans", sans-serif;
    background-color: var(--color-setting);
    color: #ffffff;
    border-radius: 5px;
    position: relative;
    top: -100px;
    left: -686px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./homepage.css" />
        <script src="./homepage.js" defer></script>
      </head>
      <body>
        <div>
          <div class="popup" id="popup-1">
            <div class="overlay">
              <div class="content">
                <div class="closebtn">&times;
                  
                </div><h2>What do you want to make?</h2>
              </div>
            </div>
          </div>
            <button type="button" class="Create" onclick="showPopup()"> Create
              <span class=button__icon>
                <ion-icon name="add-outline"></ion-icon>

              </span>
            </button>
            <button type="button" class="settings"> Settings
              <span class="button__icon">
                <ion-icon name="cog-outline"></ion-icon>
              </span>
            </button>
            <button type="button" class="del"> Delete
              <span class=button__icon>
                <ion-icon name="trash-outline"></ion-icon>
              </span>
            </button>
            <button type="button" class="feed"> Feedback
              <span class="button__icon">
                <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
              </span>
            </button>
        </div>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
      </body>
</html>

【讨论】：