Search code examples
javascriptmodal-dialogbootstrap-modalpopoverbootstrap-popover

How to hide popover when modal open

Let's say I have a popover that contains links <a> and some of these links can open modal.

The problem is that this popover is still active when modal is open. How to hide all active popovers when any modal show after clicking on those links inside this popover?

<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>

Solution

  • You can use popover hide function to hide the popover.

    Working Example : http://jsfiddle.net/qy9Az/3414/

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

    in your Case i think this will help

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

    Where test is the class of the element on which popover is attached

    See https://v4-alpha.getbootstrap.com/components/popovers/#popoverhide for more details