如何使用jQuery检测页面弹窗是否显示？新手技术求助

嘿，别担心，我一眼就看出你之前的代码里选择器和方法用错啦～ 咱们一步步来搞定这个问题：

问题出在哪？ #

你之前写的几个判断都有语法错误：

• $("#modal large popup")：这个选择器的意思是「找id为modal的元素下面的large标签里的popup标签」，完全不是你要找的同时拥有modal、large、popup类的弹窗元素。
• $("verifyIdentity")：这是在找名为verifyIdentity的HTML标签，而你的弹窗是id为verifyIdentity，应该用$("#verifyIdentity")（id选择器要加#）。
• hasClass('.modal large popup is-visible')：hasClass()方法只接受单个类名作为参数，而且类名前面不能加.，你一次性传一堆类肯定没用。

正确的检测方法 #

你的弹窗是通过is-visible这个类来控制显示/隐藏的，所以直接检测这个类的存在最可靠（比:visible伪类更准确，因为有些元素可能隐藏但仍符合:visible的判断）。

方法1：单次检测弹窗状态 #

用弹窗的id选择器（最精准，效率最高），然后检查是否有is-visible类：

// 检测弹窗是否处于显示状态
if ($("#verifyIdentity").hasClass("is-visible")) {
  // 这里写弹窗显示时要执行的代码
  alert("弹窗正在显示哦");
} else {
  // 这里写弹窗隐藏时要执行的代码
  alert("弹窗已经关闭啦");
}

方法2：监听弹窗状态变化（自动触发函数） #

如果想在弹窗显示或隐藏的瞬间自动执行函数，而不是手动检测，可以用MutationObserver来监听DOM类的变化：

// 获取弹窗元素
const modalElement = document.getElementById("verifyIdentity");

// 创建观察者，监听类属性变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 只关注class属性的变化
    if (mutation.attributeName === "class") {
      const isVisible = modalElement.classList.contains("is-visible");
      if (isVisible) {
        // 弹窗刚显示时执行
        console.log("弹窗打开了！");
      } else {
        // 弹窗刚关闭时执行
        console.log("弹窗关闭了！");
      }
    }
  });
});

// 开始监听弹窗的class属性变化
observer.observe(modalElement, { attributes: true });

这样不管用户是点击按钮关闭弹窗，还是通过其他方式切换弹窗状态，你的函数都会自动触发啦～

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