Question

我正在制作一个笔记应用程序，让您可以选择在单击按钮时以模式查看所述笔记。有两种方法可以通过单击“X”按钮或在模态外单击来关闭它。当我继续使用这些选项之一时，模态将成功关闭，但如果我第二次打开它，“X”按钮或单击外部似乎都不起作用。我该如何解决这个问题？

class Input {
  constructor(note) {
    this.note = note;
  }
}

class UI {
  addNote(input) {
    // Get table body below form
    const content = document.querySelector(".content");
    // Create tr element
    const row = document.createElement("tr");
    // Insert new HTML into div
    row.innerHTML = `
      <td>
        ${input.note}
        <br><br>
        <button class="modalBtn">View Note</button>
      </td>
    `;

    content.appendChild(row);

    // Event listener to make modal
    document.querySelector(".modalBtn").addEventListener("click",       function(e) {
      // Get container div
      const container = document.querySelector(".container");
      // Create div
      const div = document.createElement("div");
      // Assign class to it
      div.className = "modal";
      // Insert HTML into div
      div.innerHTML = `
        <div class="modal-content">
          <span class="closeBtn">&times;</span>
          <div>
            <p>${input.note}</p>
          </div>
        </div>
      `;
      // Append the new div to the container div
      container.appendChild(div);
      
      // Get modal
      const modal = document.querySelector(".modal");

      // Event listener to close modal when "x" is clicked
      document.querySelector(".closeBtn").addEventListener("click",       function() {
        modal.style.display = "none";
      });

      // Event listener to close when the window outside the modal       is clicked
      window.addEventListener("click", function(e) {
        if (e.target === modal) {
          modal.style.display = "none";
        }
      });
    });
  }

  // Clear input field
  clearInput() {
    note.value = "";
  }
  
}

// Event listener for addNote
document.getElementById("note-form").addEventListener("submit", function(e) {
  // Get form value
  const note = document.getElementById("note").value;
  // Instantiate note
  const input = new Input(note);

  // Instantiate UI
  const ui = new UI();

  // Validate form (make sure input is filled)
  if (note === "") {
    // Error alert
    alert("Please fill in text field!");
  }
  else {
    // Add note
    ui.addNote(input);

    // Clear input field
    ui.clearInput();
  }

  e.preventDefault();
});

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

.button {
    background: coral;
    padding: 1em 2em;
    color: #fff;
    border: 0;
}

.button:hover {
    background: #333;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #f4f4f4;
    margin: 20% auto;
    padding: 20px;
    width: 70%;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17);
    animation-name: modalopen;
    animation-direction: 1s;
}

.closeBtn {
    color: #ccc;
    float: right;
    font-size: 30px;
}

.closeBtn:hover,
.closeBtnBtn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@keyframes modalopen {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" integrity="sha512-5fsy+3xG8N/1PV5MIJz9ZsWpkltijBI48gBzQ/Z2eVATePGHOkMIn+xTDHIfTZFVb9GMpflF2wOWItqxAP2oLQ==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
  <title>Note Taker</title>
</head>
<body>
  <div class="container">
    <h1>Note Taker</h1>
    <h5>Add A New Note:</h5>
    <form id="note-form">
      <div>
        <label>Note:</label>
        <textarea name="Note" id="note" class="u-full-width">               </textarea>
      </div>
      <div>
        <button type="submit" class="button-primary">Add                   Note</button>
      </div>
    </form>
    <table>
      <tbody class="content"></tbody>
    </table>
  </div>
  
  <script src="app.js"></script>
</body>
</html>

Answer 1

发生这种情况是因为当你申请时

modal.style.display = "none";

对于模态，你不是在破坏它，你只是在隐藏它。此外，每次创建模态时，并使用

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

您没有收到附加到容器的新模式，而是收到了隐藏的模式。这就是 click 事件不起作用的原因，因为它被添加到隐藏的模态中。要修复该更改，

这个：

modal.style.display = "none";

为此：

container.removeChild(modal);

在两个事件监听器中

JavaScript 模态只会在第一次打开后关闭，而不会在第二次打开后关闭

1 个答案: