Javascript：我试图通过向元素添加 class 来操纵 HTML

Question

我正在尝试将 add.hidden 添加到 2 个类。 但是，在运行代码后，一旦进行了更改，我就无法获得 if 语句来检查网站中的更改状态。 总体目标：一旦在 Modal 之外单击，我希望 Modal 关闭。

const modalButtons = document.querySelectorAll('.show-modal');

const modal = document.querySelector('.modal');

const closeModal = document.querySelector('.close-modal');

const overlay = document.querySelector('.overlay');

const body = document.body;
    for (let i = 0; i < modalButtons.length; i++) {
      modalButtons[i].addEventListener('click', function () {
        modal.classList.remove('hidden');
        overlay.classList.remove('hidden');
      });
    if (!modal.classList.contains('hidden')) {
        modal.addEventListener('click', function (e) {
          if (modal.contains(e.target)) {
          } else {
            modal.classList.add('hidden');
            overlay.classList.add('hidden');
          }
        });
      } 
    }

// HTML 下面的文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Modal window</title>
  </head>
  <body>
    <button class="show-modal">Show modal 1</button>
    <button class="show-modal">Show modal 2</button>
    <button class="show-modal">Show modal 3</button>

    <div class="modal hidden">
      <button class="close-modal">&times;</button>
      <h1>I'm a modal window 😍</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="overlay hidden"></div>

    <script src="script.js"></script>

  </body>
</html>

Answer 1

如果没有看到您的 html 代码，就很难理解您的代码应该做什么。 所以我建议不要将 css class 应用于模态/叠加层本身，而是将其应用于主体，这样您就可以更好地控制打开模态时其他元素的行为方式，例如，您可以模糊叠加层下的所有内容:

 const modalButtons = document.querySelectorAll('.show-modal'); const modal = document.querySelector('.modal'); const closeModal = document.querySelector('.close-modal'); const overlay = document.querySelector('.overlay'); const body = document.body; for (let i = 0; i < modalButtons.length; i++) { modalButtons[i].addEventListener('click', function(e) { document.body.classList.add('popup'); modal.querySelector(".body").title = e.target.textContent; }); }; modal.addEventListener('click', function(e) { if (e.target === overlay || e.target === closeModal) { document.body.classList.remove('popup'); } });

 body:not(.popup) >.modal { display: none; } /* popup is opened */ body.popup >:not(.modal) { filter: blur(2px); }.overlay { background-color: rgba(0, 0, 0, 0.3); position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; }.modal { height: 100vh; width: 100vw; display: flex; }.modal >.content { z-index: 999; position: relative; background-color: lightgreen; border: 1px solid black; width: 10em; height: 10em; padding-top: 1.5em; display: flex; margin: auto; }.modal.body:after { content: " opened by: " attr(title); }.modal.close-modal { position: absolute; right: 0; top: 0; }

 <div class="container"> <button class="show-modal">click 1</button> <button class="show-modal">click 2</button> <button class="show-modal">click 3</button> </div> <div class="modal"> <div class="overlay"></div> <div class="content"> <div class="body"> this is modal popup </div> <button class="close-modal">close</button> </div> </div>

Answer 2

我相信这可能是您问题的可能解决方案（检查 JS）：

 const modalButtons = document.querySelectorAll('.show-modal'); const modal = document.querySelector('.modal'); const closeModal = document.querySelector('.close-modal'); const overlay = document.querySelector('.overlay'); const body = document.body; for (let i = 0; i < modalButtons.length; i++) { modalButtons[i].addEventListener('click', function () { modal.classList.remove('hidden'); overlay.classList.remove('hidden'); document.addEventListener("click", (evt) => { let targetEl = evt.target; // clicked element if(targetEl == overlay){//check to see if the overlay has been clicked then close the modal. modal.classList.add("hidden"); overlay.classList.add("hidden"); } }); }); /*if (.modal.classList.contains('hidden')) { modal,addEventListener('click'. function (e) { if (modal.contains(e.target)) { } else { modal.classList;add('hidden'). overlay.classList;add('hidden'); } }); }*/ }

 .overlay{ background-color: rgba(100, 100, 100, 0.5); width:50vw; height:50vh; }.hidden{ opacity:0; } body{ background-color:black; }.modal{ width:50%; height:50%; border:1px solid black; background:white; }.center { display: block; margin-left: auto; margin-right: auto; width: 50%; }

 <body> <div class="overlay hidden">Your overlay(click to close) <img class="modal hidden center" alt="your modal"> </div> <button class="show-modal">Show modal</button> <button class="show-modal">Show modal</button> <button class="show-modal">Show modal</button> </body>

这是通过使用侦听器来检查点击的启动位置来实现的。 您可以修改它以适用于多个模式和单击不同元素时（只需添加到条件 if 中检查以查看选择了哪个目标，然后隐藏模式）。

Javascript：我试图通过向元素添加 class 来操纵 HTML

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-08-14 16:08:14

解决方案2
1 2021-08-14 17:14:35

Javascript：我试图通过向元素添加 class 来操纵 HTML

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-08-14 16:08:14

解决方案2 1 2021-08-14 17:14:35

解决方案1
1 已采纳 2021-08-14 16:08:14

解决方案2
1 2021-08-14 17:14:35