javascript - 如何创建自定义模式弹出窗口 - 以及如何在其外部单击关闭它

Question

<分区>

Answer 1

查看此答案:Close/hide an element when clicking outside of it (but not inside)

• 使用 EventTarget.addEventListener() 将所需的事件监听器(如 “click”)分配给 document 或 window
• 使用Event.target结合Element.closest()作为否定 ! - 为了检查 Event.target(启动事件的元素) - 它的自身或最近的祖先是否有特定的选择器。
• 要控制元素可见性，请创建一个执行必要样式的 CSS 类，并使用 Element.classlist添加、删除或切换该类(根据需要)。

模态示例:

// DOM utility functions:
const el = (sel, par) => (par ||document).querySelector(sel);
const els = (sel, par) => (par ||document).querySelectorAll(sel);


// Task: modal:
const toggleModal = (evt) => {
  const sel = evt.currentTarget.dataset.modal;
  if (!sel) evt.currentTarget.closest(".Modal").classList.remove("is-open");
  el(sel).classList.add("is-open")
};

els("[data-modal]").forEach(elModalButton => {
  elModalButton.addEventListener("click", toggleModal);
});

addEventListener("click", (evt) => {
  // if click on button or inside modal — do nothing
  if (evt.target.closest("[data-modal]") || evt.target.closest('.Modal')) return;
  // else — close any open modal:
  els(".Modal.is-open").forEach(elModalOpen => {
    elModalOpen.classList.remove("is-open");
  });
});

/* MODAL */

.Modal {
  position: fixed;
  z-index: 99999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 200px;
  padding: 2em;
  background: gold;
  
  /*Hide modal by default */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}

.Modal.is-open {
  background: red !important;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

<button data-modal="#modal_1" type="button">Call modal 1</button>
<button data-modal="#modal_2" type="button">Call modal 2</button>


<div class="Modal" id="modal_1">
  <h2>Modal 1 title</h2>
  <p>Pop 1 description...</p>
  <button type="button" data-modal>OK</button>
</div>

<div class="Modal" id="modal_2">
  <h2>Modal 2 title</h2>
  <p>Pop 2 description...</p>
  <button type="button" data-modal>OK</button>
</div>