Modal无法弹出问题求助：点击按钮无响应

你的代码存在三个核心问题，导致按钮无法点击、模态框功能失效：

1. JS代码执行时机错误 #

如果你的JS代码放在<head>标签中，此时DOM元素还未加载完成，document.getElementById会返回null，无法成功绑定点击事件。

2. CSS选择器不匹配 #

HTML中模态框内容的类是modal，但CSS里用了ID选择器#modal，导致模态框样式无法生效。

3. 模态容器未设置全屏尺寸 #

#modal_container使用fixed定位，但未设置top、left、width、height属性，容器无法覆盖全屏，遮罩效果和点击区域都异常。

修正后的完整代码 #

HTML（调整JS位置）

<button type="button" id="open">Click me</button>
<div id="modal_container">
  <div class="modal">
    <h1>Modal 1</h1>
    <p>Lorem ipsum... </p>
    <button type="button" id="close">Close me!</button>
  </div>
</div>

<!-- 将JS放在body末尾，确保DOM加载完成后执行 -->
<script>
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

function show() {
  modal_container.classList.add('show')
}

function hide() {
  modal_container.classList.remove('show')
}

open.addEventListener('click', show);
close.addEventListener('click', hide);
</script>

CSS（修正选择器与容器尺寸）

#modal_container {
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease; /* 可选：添加过渡动画提升体验 */
}

#modal_container.show {
  opacity: 1;
  pointer-events: auto;
}

/* 用类选择器匹配HTML中的modal元素 */
.modal {
  background-color: #fff;
  border-radius: 5px;
  padding: 30px 50px;
  width: 600px;
  max-width: 100%;
}

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