Custom Alert Box自定义弹窗运行无显示，求问题排查及修复方案

问题根源 #

你认为CSS有问题的推测不成立，无法显示弹窗的核心问题出在JavaScript逻辑：

• 创建了弹窗DOM节点后没有将其插入到页面的DOM树中，浏览器不会渲染未挂载的节点
• 全局作用域下自定义函数命名为alert，会覆盖浏览器原生的window.alert方法，存在全局命名冲突风险
• 额外缺失关闭弹窗的交互逻辑，点击关闭按钮无法触发弹窗销毁

修复后的完整代码 #

<style>
  .verdana {
    font-family: Verdana;
  }
  
  .modal__overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000000000000000;
  }
  
  .modal__window {
    max-width: 500px;
    background: #ffffff;
    border: 1px solid #ffffff;
    font-size: 16px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  }
  
  .modal__titlebar {
    height: 40px;
    background: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .modal__title {
    margin-left: 15px;
    font-weight: bold;
    color: #eeeeee;
  }
  
  .modal__close {
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    background: transparent;
    color: #eeeeee;
    cursor: pointer;
  }
  
  .modal__close:active {
    transform: scale(0.9);
  }
  
  .modal__content {
    padding: 15px;
    font-size: 0.9em;
  }
</style>
<script>
  // 重命名函数避免和原生alert冲突
  function customAlert(title, content) {
    var alertContent = `<div class="modal__overlay verdana">
<div class="modal__window">
                    <div class="modal__titlebar">
                                            <span class="modal__title">
                                            ${title}
                                            </span>                        
                                            <button class="modal__close">X</button>                    
                                            </div>                     
                                            <div class="modal__content">${content}
                                            </div>
                                            </div>
                                            </div>`
    var dialogBox = document.createElement("div");
    dialogBox.innerHTML = alertContent;
    // 将弹窗挂载到body完成渲染
    document.body.appendChild(dialogBox);
    // 绑定关闭按钮事件
    dialogBox.querySelector('.modal__close').addEventListener('click', () => {
      document.body.removeChild(dialogBox);
    })
  }
  customAlert("dialog", "box")
</script>

核心修改点说明 #

1. 重命名alert函数为customAlert，避免覆盖浏览器原生方法
2. 新增document.body.appendChild(dialogBox)代码，将创建的弹窗节点挂载到页面DOM树中
3. 新增关闭按钮点击事件绑定，点击后从DOM树中移除弹窗节点实现关闭效果
4. 字符串拼接改用模板字符串的${}语法，代码更整洁易读

内容的提问来源于stack exchange，提问作者Vivaan