模态打开时如何隐藏弹出窗口

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

我相信我理解你的问题集不可见：隐藏弹出窗口（任何），fiddle

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

Answer 2

您可以使用弹出窗口隐藏功能来隐藏弹出窗口。

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

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

在您的案例中，我认为这会有所帮助

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

其中 test 是附加弹出窗口的元素的 class

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

Answer 3

我认为这会有所帮助

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

模态打开时如何隐藏弹出窗口

How to hide popover when modal open

javascript

modal-dialog

bootstrap-modal

popover

bootstrap-popover