点击Open Modal按钮后模态框消失，请求代码问题排查

你的模态框出现后立刻消失，主要有几个关键问题导致这个现象，我来帮你逐个拆解并修复：

1. 错误的HTML class属性定义 #

在你的modalContent字符串里，给容器加了两个独立的class属性：

const modalContent = `<div class="nr-modal-container" class="modal"> ... </div>`;

HTML元素不能重复定义class属性，浏览器只会识别第一个，所以modal类根本没被应用到容器上，这会导致你的CSS样式失效，后续的visible类也无法正确触发显示逻辑。

修复方式：合并两个class到一个属性里：

const modalContent = `<div class="nr-modal-container modal"> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>`;

2. 错误替换整个body内容 #

你在shwoModal（注意这里拼写错了，应该是showModal）函数里用了：

document.body.innerHTML = modalContent;

这行代码会完全替换掉body里的所有内容，包括原来的Open Modal按钮。当你点击按钮触发模态框时，按钮被立刻删除，浏览器的事件处理会因为目标元素消失而出现异常，导致模态框刚添加就被后续的事件逻辑影响而消失。

修复方式：改用insertAdjacentHTML把模态框追加到body末尾，而不是替换整个内容：

const showModal = function(){ // 先修复拼写错误
  document.body.insertAdjacentHTML('beforeend', modalContent);
  const modal = document.querySelector(".nr-modal-container");
  modal.classList.add("visible");
  return false;
}

3. 事件监听的冲突与冗余 #

你给document绑定了两个独立的click事件，都调用了e.preventDefault()和e.stopPropagation()，这会导致事件传播被异常阻断，而且当模态框被添加后，第一个事件监听会捕获所有点击，包括模态框本身的点击（除了close按钮），可能触发意外的逻辑。

优化方式：

• 移除按钮点击事件里的e.preventDefault()和e.stopPropagation()，因为按钮本身没有默认跳转行为，不需要阻断；
• 在模态框的事件监听里，增加点击模态框背景关闭的逻辑，并且先判断模态框是否存在，避免报错：

调整后的事件监听代码：

document.addEventListener("click",function(e){
  if(e.target.classList.contains('open-modal-button')){
    nrSanckbar.deleteConfirm()
  }
})

同时修改nrSanckbar里的事件监听：

document.addEventListener("click",function(e){
  const modal = document.querySelector(".nr-modal-container");
  if(!modal) return; // 模态框不存在时直接返回
  if(e.target.classList.contains('close') || e.target === modal){
    modal.classList.remove("visible");
    modal.remove();
  }
})

4. 其他小问题修复 #

• 函数名拼写错误：shwoModal改为showModal，避免调用出错；
• CSS动画笔误：-moz-transform: tscale(1);改为-moz-transform: scale(1);，修复火狐浏览器的动画失效问题：

@-moz-keyframes scale{
  0% { opacity: 0; -moz-transform: scale(1.3); }
  100% { opacity: 1; -moz-transform: scale(1);}
}

完整修复后的代码 #

JavaScript #

let nrSanckbar = (function(){
  const modalContent = `<div class="nr-modal-container modal"> <div class="modal-content"> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div>`;
  document.addEventListener("click",function(e){
    const modal = document.querySelector(".nr-modal-container");
    if(!modal) return;
    if(e.target.classList.contains('close') || e.target === modal){
      modal.classList.remove("visible");
      modal.remove();
    }
  })
  const showModal = function(){
    document.body.insertAdjacentHTML('beforeend', modalContent);
    const modal = document.querySelector(".nr-modal-container");
    modal.classList.add("visible");
    return false;
  }
  return {
    deleteConfirm: function(data) {
      showModal()
    },
  }
})();
document.addEventListener("click",function(e){
  if(e.target.classList.contains('open-modal-button')){
    nrSanckbar.deleteConfirm()
  }
})

CSS #

.modal {
  position: fixed;
  z-index: 10;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  border-radius: 5px;
  box-shadow: 0 24px 38px 3px rgba(60, 75, 100, 0.14);
  display:none;
}
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.visible {
  display: block;
}
.visible > .modal-content {
  display: block;
  -webkit-animation: scale .3s ease-out;
  -moz-animation: scale .3s ease-out;
}
@-webkit-keyframes scale {
  0% { opacity: 0; -webkit-transform: scale(1.3); }
  100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes scale{
  0% { opacity: 0; -moz-transform: scale(1.3); }
  100% { opacity: 1; -moz-transform: scale(1);}
}

HTML #

<button class="open-modal-button">Open Modal</button>

现在点击按钮，模态框会正常显示，点击close按钮或者模态框背景都可以关闭它，不会再出现立刻消失的问题了。

内容的提问来源于stack exchange，提问作者نور