如何用弹出窗口内的按钮关闭bootstrap-popover？

Question

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

Answer 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});

Answer 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');
});

Answer 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'
});

Answer 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

Answer 5

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');

Answer 6

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.

Answer 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' );
}