应先确认弹窗元素存在，再用classList.contains检查其是否含有show等状态类名；若元素不存在则直接返回false，避免报错。
直接用 classList.contains 判断弹窗是否打开，核心是：**先确认弹窗元素存在，再检查它是否含有代表“已打开”的 CSS 类名（比如 show、active 或 open）**。
确认弹窗元素和状态类名
大多数弹窗通过添加一个特定类名来控制显示（例如 modal--open），而不是靠内联样式或 display 属性。你需要知道：
- 弹窗 DOM 元素的引用（如
const modal = document.getElementById('myModal')） - 约定好的“打开态”类名（常见有
show、is-open、visible等）
基础判断写法
只要元素存在且有该类，就视为打开：
const modal = document.querySelector('.modal');
if (modal && modal.classList.contains('show')) {
console.log('弹窗已打开');
} else {
console.log('弹窗未打开或不存在');
}
封装成可复用函数
避免重复写判空逻辑，可以封装为工具函数：
立即学习“Java免费学习笔记（深入）”；
<pre class="brush:php;toolbar:false;">function isModalOpen(selector, stateClass = 'show') {
const el = document.querySelector(selector);
return el && el.classList.contains(stateClass);
}
// 使用示例
if (isModalOpen('.login-modal', 'active')) {
// 执行关闭逻辑或阻止重复打开
}
注意点：避免常见陷阱
不要只依赖 classList.contains 而忽略元素是否存在 —— 如果弹窗还没渲染进 DOM（比如懒加载或条件渲染），querySelector 返回 <code>null，直接调用 classList.contains 会报错 Cannot read property 'contains' of null。
也不建议用 getComputedStyle(el).display !== 'none' 替代，因为 display 可能被继承、被 !important 覆盖，或受 visibility、opacity、transform 等影响，语义不明确。
