javascript - 在 window vanilla js 上关闭模态

Question

我一直在试图弄清楚如何关闭我通过单击窗口创建的模式，但没有成功。我的模态是通过添加一个类并删除“show-modal”类来激活的。所以我创建了窗口事件监听器，似乎每当我按下 HTML 中的“a”标签时，它也会认为单击是窗口的一部分，因此模式甚至不会打开。
但是，一旦我删除了窗口事件监听器，模态就可以正常工作；但除非我点击“closeModal”按钮，否则模态不会关闭。
有什么我做错或改进的地方吗？我试着用谷歌搜索，但他们的想法与我的不同。
我知道我可以使用 React 和 Boostrap 来做到这一点，但我也在努力学习普通的 JS 方式，所以我想正确地做到这一点!

const contact = document.querySelector('.contact');
const modal = document.querySelector('.modal');
const closeModal = document.querySelector('.closeBtn');

contact.addEventListener('click', showModal);
closeModal.addEventListener('click', modalClose);
window.addEventListener('click', modalClose);

function showModal(){
    modal.classList.add('show-modal');
    console.log('clicked')
}

function modalClose(){
    modal.classList.remove('show-modal');
    console.log('closed')
}

Answer 1

解决这个问题的一种方法是向模态添加一个“底层”并监听点击它而不是窗口元素。
我也喜欢将模态公开课添加到 body所以很容易在模态和模态底层上调整样式。

document.querySelector('button#open').addEventListener('click', e => {
  document.body.classList.add('show-modal')
})

document.querySelector('button#close').addEventListener('click', e => {
  document.body.classList.remove('show-modal')
})

document.querySelector('.underlay').addEventListener('click', e => {
  document.body.classList.remove('show-modal')
})

.modal {
  height: 100px;
  width: 100px;
  background-color: white;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.underlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.show-modal .modal {
  display: block;
}

.show-modal .underlay {
  display: block;
}

<button id="open">Open Modal</button>
<div class="underlay"></div>
<div class="modal">
  <button id="close">Close Modal</button>
</div>
</div>