单击关闭“X”时，为什么我的模态不会关闭？

Question

我认为问题出在我的 JS 上，因为我可以在单击模态按钮时成功添加“active”类，但是当单击模态按钮上的关闭按钮时，我的 JS 没有删除“active”类。

这是我的 HTML：

    <body>
            <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <h1>Confirm</h1>
        <div class="copy">Lorem ipLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et pellentesque turpis. Morbi consequat porttitor nisl at consectetur. Nulla facilisi.</div>
        <div class="button-wrapper">
          <button class="btn">Green</button>
          <button class="btn">Red</button>
        </div>
      </div>
    </div>
    
    </div>
    <script src="main.js"></script>
    
    </body>

这是我的 SCSS

    /* The Modal (background) */
    .modal {
      opacity: 0; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: #fff; /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
      // transition: transform 1s ease-in 0.5s;
      transition: opacity 0.2s ease-in;
      &.active {
        opacity: 1;
      }
    
      /* Modal Content/Box */
      .modal-content {
        position: relative;
        background-color: #fff;
        margin: 15% auto; /* 15% from the top and centered */
        padding: $space-md;
        width: 80%; /* Could be more or less, depending on screen size */
        max-width: 750px;
      }
    
      /* The Close Button */
      .close {
        position: absolute;
        color: #ffffff;
        font-size: 28px;
        font-weight: bold;
        right: -22px;
        top: -40px;
      }
    
      .close:hover,
      .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
    
      h1 {
        text-align: center;
      }
    
      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-top: $space-sm;
    
        .btn:first-of-type {
          margin-right: 20px;
        }
      }
    }

最后我的JS

    // Function opens modal
    // Target the Modal by ID with a click event listener
    document.querySelector("#myModal").addEventListener("click", () => {
      // Target the Modal class and add class "active"
      document.querySelector(".modal").classList.add("active")
    })

    // Target the Close button
    document.querySelector(".close").addEventListener("click", () => {
      // Target the Modal and remove the class "active"
      document.querySelector(".modal").classList.remove("active")
    })

提前致谢！

添加占位符文本 b/c 如果没有更多文本，我无法发布：Lorem ipsum dolor sat amet，consectetur adipiscing elit。 Nam pellentesque a ex ac tempus。 Nam pretium nunc libero, ac gravida leo tincidunt 坐 amet。 Fusce id arcu a dolor egestas tempor ultrices eu justo。 Praesent non turpis rhoncus、porttitor felis ac、pellentesque nunc。 Aliquam pharetra efficitur nisl, id posuere enim imperdiet et. Donec ullamcorper bibendum massa，在 placerat est congue 格言中。 Nulla rutrum enim 坐 amet turpis ultrices, vel maximus justo vehicula。 sed accumsan quam dolor, a consequat ex tempus ut。 Aliquam id felis cursus, pulvinar odio sat amet, pharetra nisi。 Maecenas vel ultricies 前。 Curabitur nec consectetur neque。 Orci ullamcorper luctus 中的蛋白质坏死。 Etiam 在 pellentesque turpis。 Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ultricies lacinia nulla，在 viverra neque blandit id。 Etiam ut rhoncus dolor。