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

我看到你遇到了点击打开按钮后模态框刚弹出来就消失的麻烦，咱们来拆解一下代码里的问题，然后一步步修复它：

问题根源分析 #

1. 错误的DOM替换方式：你在shwoModal（注意这里拼写有误，应该是showModal）函数里用document.body.innerHTML = modalContent直接替换了整个body的内容，这会把原来的"Open Modal"按钮从DOM中彻底移除。浏览器处理点击事件时，因触发元素突然消失，会导致后续事件逻辑异常，最终让模态框刚出现就被销毁。
2. 重复的class属性：模态框模板里<div class="nr-modal-container" class="modal">有两个重复的class属性，不符合HTML规范，浏览器只会识别第一个class属性，导致模态框初始样式不生效。
3. 不必要的事件阻止：两个全局的document点击事件都调用了e.preventDefault()和e.stopPropagation()，这会干扰正常的事件流，尤其是按钮点击事件里的阻止冒泡，会影响后续可能的事件处理。

修复后的完整代码 #

HTML

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

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);}
}

JavaScript

let nrSanckbar = (function(){
 // 修复重复的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>`;

 document.addEventListener("click",function(e){
  // 仅在点击关闭按钮时处理
  if(e.target.classList.contains('close')){
   e.preventDefault();
   const modal = document.querySelector(".nr-modal-container");
   modal.classList.remove("visible");
   // 延迟移除DOM，保证动画完整执行
   setTimeout(() => modal.remove(), 300);
   return;
  }
 })

 // 修正函数名拼写错误
 const showModal = function(){
  // 创建元素追加到body，而非替换整个内容
  const modalWrapper = document.createElement('div');
  modalWrapper.innerHTML = modalContent;
  document.body.appendChild(modalWrapper.firstElementChild);
  
  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')){
  e.preventDefault();
  nrSanckbar.deleteConfirm()
 }
})

关键修改说明 #

1. DOM添加方式优化：不再替换整个body的内容，而是创建新元素追加到body中，保留原按钮，避免事件异常。
2. 修复重复class属性：合并模态框容器的class属性，确保样式正常应用。
3. 调整事件阻止逻辑：仅在必要场景（如关闭按钮点击）调用e.preventDefault()，不再盲目阻止全局事件的冒泡和默认行为。
4. 优化模态框移除时机：关闭时先隐藏模态框完成动画，再延迟移除DOM，提升视觉体验。
5. 修正函数名拼写：将shwoModal改为showModal，符合代码规范。

现在点击"Open Modal"按钮，模态框就能正常显示，点击关闭按钮也能正常隐藏啦！

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