Question

假设我有一个包含links <a>的弹出窗口，其中一些链接可以打开modal。

问题是当模态打开时，此弹出框仍处于活动状态。如何在点击此弹出窗口中的链接后显示时隐藏所有活动的弹出窗口？

<div class="popover-content">
<ul class="popover-ul">
    <li>
      <a href="#" data-msg="<h4>OUT</h4><img src='yourlinkhere' alt='OUT'>" data-toggle="modal" data-target="#doc-modal" data-ok="data-ok">
      OUT
      </a>
    </li>
</ul>

Answer 1

您可以使用popover hide功能隐藏popover。

工作示例：http://jsfiddle.net/qy9Az/3414/

$('.test').popover('hide')

在您的案例中

我认为这会有所帮助

$('body').on('shown.bs.modal', function() {
     $("[data-toggle=popover]").popover('hide')
});

其中test是附加popover的元素的类

有关详细信息，请参阅https://v4-alpha.getbootstrap.com/components/popovers/#popoverhide

Answer 2

我认为这会有所帮助

$('body').on('shown.bs.modal', function() {
     $("[data-toggle=popover]").popover('hide')
});

Answer 3

我相信我的问题并不明显：隐藏popovers （任意），fiddle

var _pops = document.getElementsByClassName("popover-content");
console.log(_pops)
for(var i=0; i<_pops.length;i++){
_pops[i].style.visibility = "hidden"
}

模态打开时如何隐藏popover

3 个答案: