How can i close a bootstrap-popover with a button inside the popover?

问题:

I have made a jsFiddle where i use twitter bootstrap popover function on an icon.

<div style="margin-top:200px">     <ul>         <li class="in-row">             <a href="#" id="meddelanden" data-title="Meddelanden" data-toggle="clickover"              data-placement="right"><i class="icon-globe"></i></a>         </li>     </ul> </div> 

jquery:

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+     '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+     '<button id="close-popover" class="btn btn-small btn-primary pull-right">Close please!</button>';  $('#meddelanden').popover({animation:true, content:elem, html:true}); 

I do not seem to be able to close the popover with the button inside it. I have tried making a jquery click function on the id "close-popover" but noting happens. (I did not include my attempt to close it inside the jsfiddle)

Any suggestions for how you can close a popover with a button inside the popover?

Regards, Bill

回答1:

Try this:- http://jsfiddle.net/6hkkk/

var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+     '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+     '<button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$(&quot;#meddelanden&quot;).popover(&quot;hide&quot;);">Close please!</button>';    $('#meddelanden').popover({animation:true, content:elem, html:true}); 

回答2:

How about just a little onclick:

<button onclick="$('#meddelanden').popover('hide');" class="btn btn-small btn-primary pull-right">Close please!</button> 

Or how about a function:

<button onclick="close_please();" class="btn btn-small btn-primary pull-right">Close please!</button> 

with...

function close_please() {     $('#meddelanden').popover('hide'); } 

Or how about binding to the button after it has been created.

$('#meddelanden').popover({animation:true, content:elem, html:true}); $('#close-popover').bind('click', function(){     $('#meddelanden').popover('hide'); }); 

回答3:

Previous examples have two main drawbacks:

1. The 'close' button needs in some way, to be aware of the ID of the referenced-element.
2. The need of adding on the 'shown.bs.popover' event, a 'click' listener to the close button; which is also not a good solution because of, you would then be adding such listener each time the 'popover' is shown.

Below is a solution which has not such drawbacks.

By the default, the 'popover' element is inserted immediately after the referenced-element in the DOM (then notice the referenced-element and the popover are immediate sibling elements). Thus, when the 'close' button is clicked, you can simply look for its closest 'div.popover' parent, and then look for the immediately preceding sibling element of such parent.

Just add the following code in the 'onclick' handler of the 'close button:

$(this).closest('div.popover').prev().popover('hide'); 

Example:

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').prev().popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>';  $loginForm.popover({     placement: 'auto left',     trigger: 'manual',     html: true,     title: 'Alert' + genericCloseBtnHtml,     content: 'invalid email and/or password' }); 

回答4:

try this:

<input type="button" onclick="$(this).parent().hide();" value="close"> 

by passing $(this) your referencing the button and parent references the element the button sits in

回答5:

Put this in your title popover constructor...

'<button class="btn btn-danger btn-xs pull-right" onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon glyphicon-remove"></span></button>some text' 

...to get a small red 'x' button on top-right corner

//$('[data-toggle=popover]').popover({title:that string here}) 

i give the same answer https://stackoverflow.com/a/23556160/3603692 I hope that is allowed.

回答6:

Alternative without calling function on click:

Javascript

var $popoverParent = $('.popover-parent').popover();  //allow to close when close button clicked //register listener before popover shown $popoverParent.on('shown.bs.popover', function() {     //get the actual shown popover     var $popover = $(this).data('bs.popover').tip();      //find the close button     var $closeButton = $popover.find('.close-btn');      $closeButton.click(function(){         $popoverParent.popover('hide');     }); });  //show your popover $popoverParent.popover('show'); 

回答7:

I have many popovers on my site, and they all have the same custom title bar, so they all have the same close button. Therefore, I can't pass an ID to an onclick handler. Instead, I decided to search for the open popover (only one can be open at a time) and then close it.

function closeMe() {   $( document ).find('.popoverIsOpen').popover( 'hide' ); } 

文章来源: How can i close a bootstrap-popover with a button inside the popover?