求助：Modal弹窗无法正常显示，寻求技术排查与解决建议

你代码里有两个关键问题导致Modal无法正常显示，修正后就能解决：

1. CSS属性值错误 #

.modal-container.show里的pointer-events: 1是无效值，pointer-events的有效值为auto/none等，这里应该改为pointer-events: auto，否则即使opacity设为1，弹窗依然无法被点击或正常交互。

2. 确保JS在DOM加载完成后执行 #

如果你的JS代码放在<head>标签内，会在DOM元素还未渲染完成时就执行，导致无法获取到对应的DOM节点。需要把JS代码放在<body>末尾，或者用DOM加载完成事件包裹代码。

修正后的完整代码 #

HTML

<button class="real45" id="open1"> Open Me </button>
  
<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1> Modals are cool </h1>
    <p> practice text </p>
    <button class="real45" id="close1"> Close Me </button>
  </div>
</div>

CSS

div.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    /* 添加过渡动画，提升交互体验 */
    transition: opacity 0.3s ease;
}

.real45 {
    background-color: #BC6C25;
    border: 0;
    border-radius: 25px;
    color: #fff;
    padding: 10px 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
}

.real45:hover {
    color: black;
}

.modal {
    background-color: #fff;
    width: 600px;
    max-width: 100%;
    padding: 30px;
    border-style: solid;
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.modal h1 {
    margin: 0;
}

.modal p {
    opacity: 0.7;
}

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', () => {
    const open1 = document.getElementById('open1');
    const modal_container = document.getElementById('modal_container');
    const close1 = document.getElementById('close1');

    open1.addEventListener('click', () => {
        modal_container.classList.add('show');
    });

    close1.addEventListener('click', () => {
        modal_container.classList.remove('show');
    });

    // 额外优化：点击遮罩层也能关闭弹窗
    modal_container.addEventListener('click', (e) => {
        if (e.target === modal_container) {
            modal_container.classList.remove('show');
        }
    });
});

我额外添加了几个小优化：给按钮加上cursor: pointer明确可点击状态、添加弹窗显隐的过渡动画、支持点击遮罩层关闭弹窗，进一步提升用户体验。

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