可以为模态框的关闭按钮和父元素绑定点击事件,同时在父元素上也绑定一个键盘事件来监听 Enter 键的按下。在关闭模态框的点击事件里禁止事件冒泡,以防止触发父元素的事件重新打开模态框。具体代码如下:
HTML:
JS: const modal = document.querySelector('.modal'); const closeBtn = modal.querySelector('.close-btn');
function closeModal() { modal.classList.remove('show'); }
// 给关闭按钮绑定点击事件 closeBtn.addEventListener('click', function(event){ event.stopPropagation(); // 阻止事件冒泡到父元素 closeModal(); });
// 给父元素绑定点击事件 modal.addEventListener('click', function(event){ if(event.target === modal) { // 点击模态框外面的区域 closeModal(); } });
// 给父元素绑定键盘事件 modal.addEventListener('keydown', function(event) { if(event.key === 'Enter') { closeModal(); } });