Bootstrap 5.3.2打开Modal时无法关闭Popover问题求助

问题场景 #

使用Bootstrap 5.3.2 + webpack 5.88.2开发，页面存在大量动态生成的.special-button-js按钮：

• 点击按钮触发#special-modal弹窗
• 鼠标hover按钮触发Popover
• 移动端点击按钮会同时打开弹窗和Popover
  期望Modal打开时自动关闭所有Popover，避免Popover显示在Modal上层，但现有代码无效果且无控制台报错，尝试过遍历按钮获取Popover实例调用hide()、jQuery的$('.special-button-js').popover('hide')均失败。

问题根源 #

你是通过委托方式创建的Popover（将实例绑定到document.body并指定selector: '.special-button-js'），这种模式下，Bootstrap不会给每个按钮生成独立的Popover实例，所有匹配选择器的按钮的Popover都由绑定在body上的specialPopover全局实例统一管理。

之前的代码中，通过Popover.getOrCreateInstance(el)获取的是针对单个按钮新建的独立实例，这个实例和实际控制Popover显示的全局实例毫无关联，所以调用它的hide()方法自然不会生效。

解决方法 #

方法1：调用全局Popover实例的hide()方法 #

直接使用创建时的全局Popover实例关闭所有关联的Popover，修改Modal的show.bs.modal事件处理代码：

document.querySelector(specialModalId).addEventListener('show.bs.modal', event => {
    // 调用全局实例的hide方法，关闭所有通过该实例管理的Popover
    specialPopover.hide();
});

方法2：精准关闭当前触发按钮的Popover #

如果只需要关闭点击的那个按钮的Popover，可以在点击事件中直接指定元素关闭：

$(document).on('click', '.special-button-js', function(e) {
    // 关闭当前按钮的Popover
    specialPopover.hide(this);
    specialModal.show();
});

补充说明 #

如果使用jQuery方式调用，也需要针对全局实例操作，而不是直接调用元素的方法：

// 正确写法：获取全局Popover实例并调用hide
$(document.body).popover('hide');

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