如何關閉彈出式窗口中的按鈕的自舉彈出窗口？

Question

我做了一個jsFiddle，我在圖標上使用twitter引導彈出窗口功能。

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

我似乎並沒有能夠與它裏面的按鈕關閉酥料餅。我試圖對id「close-popover」做一個jquery點擊函數，但注意到會發生。 （我沒有包括我試圖在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

試試這個：

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

通過傳遞$（這）你引用按鈕和父引用按鈕坐在

Answer 3

元素如何一點點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 4

在您的標題酥料餅的構造將這個......

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

前面的例子有兩個主要缺點：

1. 以某種方式「關閉」按鈕的需要，要知道被引用的元素的ID的。
2. 需要在'shown.bs.popover'事件上添加關閉按鈕的'click'偵聽器;這也不是一個好的解決方案，因爲每次顯示「彈出窗口」時，您都會添加這樣的偵聽器。

下面是一個沒有這種缺點的解決方案。

默認情況下，'popover'元素被插入到DOM中被引用的元素之後（然後注意被引用元素和popover是直接的兄弟元素）。因此，當點擊'close'按鈕時，您可以簡單地查找最接近的'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 6

替代不會對點擊呼叫功能：

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 7

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

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