如何使用Popper.js实现点击弹窗外部关闭弹窗？

我来帮你搞定这个需求！你的现有代码已经能触发弹窗显示了，现在只需要补充点击外部关闭的逻辑，同时还要避免点击弹窗内部或者按钮本身时误关闭。咱们一步步来调整：

核心思路 #

• 点击按钮时，切换弹窗的显示状态（显示/隐藏），同时创建/销毁Popper实例
• 给弹窗添加点击事件阻止冒泡，确保点击弹窗内部不会触发关闭
• 监听全局点击事件，判断点击目标是否在弹窗或按钮之外，若是则关闭弹窗并清理Popper实例

完整代码示例 #

// 缓存元素，避免重复DOM查询
const $reference = $('.js-share-cf-btn');
const $popover = $('.js-share-cf-popover');
let popperInstance = null; // 存储Popper实例，方便后续销毁

// 初始化隐藏弹窗
$popover.hide();

// 按钮点击事件：切换弹窗显示/隐藏
$reference.on('click', function(e) {
  e.preventDefault();
  e.stopPropagation(); // 阻止事件冒泡到document

  if ($popover.is(':visible')) {
    // 弹窗已显示，关闭并销毁实例
    $popover.hide();
    if (popperInstance) {
      popperInstance.destroy();
      popperInstance = null;
    }
  } else {
    // 弹窗未显示，打开并创建Popper实例
    $popover.show();
    popperInstance = new Popper($reference, $popover, {
      placement: 'top',
    });
  }
});

// 弹窗内部点击：阻止冒泡，避免触发外部关闭
$popover.on('click', function(e) {
  e.stopPropagation();
});

// 全局点击事件：点击外部时关闭弹窗
$(document).on('click', function() {
  if ($popover.is(':visible') && popperInstance) {
    $popover.hide();
    popperInstance.destroy();
    popperInstance = null;
  }
});

代码说明 #

• 缓存元素：把$reference和$popover提前缓存，减少DOM查询次数，提升性能
• Popper实例管理：用变量存储实例，关闭弹窗时销毁它，避免内存泄漏
• 事件冒泡控制：按钮和弹窗的点击都阻止冒泡，确保只有点击真正的“外部”才会触发关闭
• 切换逻辑：按钮点击时判断弹窗状态，实现显示/隐藏的切换，而不是只做显示操作

这样调整后，就能实现你想要的效果：点击按钮显示弹窗，点击弹窗外部（包括页面其他区域）关闭弹窗，点击弹窗内部或按钮本身不会关闭。

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