时间戳

首页 > 解决方案 > 窗口香草js上的关闭模式

javascript - 窗口香草js上的关闭模式

问题描述

我一直在试图弄清楚如何关闭我通过单击窗口创建的模式但没有成功。我的模态是通过添加一个类并删除“show-modal”类来激活的。所以我创建了窗口事件侦听器，似乎每当我在我的 HTML 中按下“a”标签时，它也会认为点击是窗口的一部分，因此模式甚至不会打开。

但是，一旦我删除了窗口事件侦听器，模态就可以正常工作了；但除非我点击“closeModal”按钮，否则模态不会关闭。

有什么我做错或改进的地方吗？我试着用谷歌搜索，但他们的想法与我的不同。

我知道我可以使用 React 和 Boostrap 做到这一点，但我也在尝试学习 vanilla 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')
}

标签： javascriptcss

解决方案

解决这个问题的一种方法是向模态框添加一个“底层”并监听对它的点击而不是窗口元素。

此外，我喜欢将模态开放类添加到 modal 中，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>

推荐阅读