如何用彈出窗口內的按鈕關閉bootstrap-popover？

Question

我已經制作了一個jsFiddle ，我在圖標上使用了twitter bootstrap popover函數。

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

我似乎無法用它里面的按鈕關閉popover。 我已經嘗試在id“close-popover”上創建一個jquery click函數，但是注意到了。 （我沒有把我在jsfiddle中關閉它的嘗試包括在內）

有關如何使用彈出窗口內的按鈕關閉彈出窗口的任何建議？

問候，比爾

Answer 1

試試這個： - 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

只需要一點點onclick：

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

或者功能怎么樣：

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

與...

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

或者在創建按鈕后如何綁定按鈕。

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

Answer 3

以前的示例有兩個主要缺點：

1. “關閉”按鈕需要以某種方式，以了解被引用元素的ID。
2. 需要添加'shown.bs.popover'事件，關閉按鈕的'click'監聽器; 這也不是一個好的解決方案因為，每次顯示'popover'時你都會添加這樣的監聽器。

以下是沒有這些缺點的解決方案。

默認情況下，'popover'元素緊接在DOM中的referenced-element之后插入（然后注意引用的元素和popover是直接的兄弟元素）。 因此，當單擊“關閉”按鈕時，您可以簡單地查找其最接近的“div.popover”父級，然后查找此父級的前一個兄弟元素。

只需在“關閉”按鈕的“onclick”處理程序中添加以下代碼：

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

例：

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

試試這個：

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

通過傳遞$（this）引用按鈕，父引用按鈕所在的元素

Answer 5

單擊時不調用函數的替代方法：

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

把它放在你的標題popover構造函數中......

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

...在右上角有一個小的紅色'x'按鈕

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

我給出相同的答案https://stackoverflow.com/a/23556160/3603692我希望這是允許的。

Answer 7

我的網站上有很多彈出窗口，它們都有相同的自定義標題欄，所以它們都有相同的關閉按鈕。 因此，我無法將ID傳遞給onclick處理程序。 相反，我決定搜索打開的popover（一次只能打開一個），然后關閉它。

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