如何通过jQuery检测插件弹窗样式变化并插入元素？

你已经找对了核心思路——通过jQuery监听弹窗的显示状态来插入自定义文本，只是还差几个关键细节就能完成。下面是完整的可运行方案，以及针对不同场景的优化建议：

推荐实现：用MutationObserver精准监听弹窗显示 #

相比定时轮询，浏览器原生的MutationObserver能更高效、精准地捕获弹窗的样式变化，避免不必要的性能消耗：

// 获取弹窗DOM元素
const lightboxEl = $('.bold_lightbox')[0];

// 创建MutationObserver实例，监听样式变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只关注style属性的变化，且确认弹窗已显示
    if (mutation.attributeName === 'style' && $(lightboxEl).css('display') === 'block') {
      console.log('Lightbox is now visible!');
      
      // 插入自定义文本到弹窗内（可根据需求调整插入位置）
      // 示例1：追加到弹窗末尾
      $('<p>Pricing Information Goes Here</p>').appendTo('.bold_lightbox');
      
      // 示例2：插入到弹窗内某个特定元素之后（替换成你需要的选择器）
      // $('<p>Pricing Information Goes Here</p>').insertAfter('.bold_lightbox .existing-element');
      
      // 如果只需要插入一次，插入后可以停止监听
      // observer.disconnect();
    }
  });
});

// 启动监听：只观察style属性的变化
observer.observe(lightboxEl, {
  attributes: true,
  attributeFilter: ['style']
});

关键细节说明 #

• 插入位置灵活调整：根据弹窗的结构，你可以用appendTo（追加到末尾）、prependTo（插入到开头）或insertAfter（插入到指定元素后）来控制文本的位置。
• 避免重复插入：如果弹窗可能多次触发，而你只需要文本出现一次，可以在插入后调用observer.disconnect()停止监听；如果每次弹窗显示都需要插入，就保留监听逻辑。

备选方案：定时轮询（兼容旧场景） #

如果因为环境限制无法使用MutationObserver，可以用定时检查的方式实现，虽然性能稍差但兼容性更好：

setInterval(() => {
  const lightbox = $('.bold_lightbox');
  // 仅当弹窗显示且尚未插入过文本时执行
  if (lightbox.css('display') === 'block' && !lightbox.find('.custom-pricing-note').length) {
    $('<p class="custom-pricing-note">Pricing Information Goes Here</p>').appendTo(lightbox);
  }
}, 200); // 每200毫秒检查一次

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