CODEWITHSUNDEEP
javascriptmodal-dialogbootstrap-modalpopoverbootstrap-popover
Mohammed Ali
Mohammed Ali

Reputation: 1185

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>

Upvotes: 2

Views: 1613

Answers (3)

Vineesh
Vineesh

Reputation: 3782

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

Upvotes: 2

Aspirin_xap
Aspirin_xap

Reputation: 218

I think this will help

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

Upvotes: 1

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

I belive i undertand your question set not-visible: hide popovers(any), a fiddle

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

Upvotes: 0

Related Questions