javascript - 在外部关闭“模态”窗口，并在内部具有可单击的链接

我可以对单击外部时如何关闭模式窗口有所了解，但是当尝试在模式窗口中包含链接时却遇到问题。

我在Codepen中创建了一个小代码来说明我的观点：

https://codepen.io/neotriz/pen/MRwLem

window.addEventListener('load', setup);

const get = document.getElementById.bind(document);
const query = document.querySelector.bind(document);

function setup() {

  let modalRoot = get('modal-root');
  let button = get('modal-opener');
  let modal = query('.modal');

  modalRoot.addEventListener('click', rootClick);
  button.addEventListener('click', openModal);
  modal.addEventListener('click', modalClick);

  function rootClick() {
    modalRoot.classList.remove('visible');
  }

  function openModal() {
    modalRoot.classList.add('visible');
  }

  function modalClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    return false;
  }

}

最佳答案

从e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();删除modalClick。这就是您无法单击内部链接的原因。

并修改功能rootClick

function rootClick(event) {
          if (!(modal == event.target || modal.contains(event.target))) {
    modalRoot.classList.remove('visible');
          }
  }

Codepen：https://codepen.io/anon/pen/ZZGwRr