當在外面點擊不在彈出窗口上時關閉引導彈出窗口

是否有阻止彈出窗口在關閉時彈出的內容？這發生在我添加一個container選項。當在外面點擊不在彈出窗口上時關閉引導彈出窗口

$('#share_form').popover({ 
    'container': '#share_form', 
    'html': true, 
    'content': function() { return $('#popover_content').html(); }, 
    'title': 'My Title', 
    'placement': 'bottom', 
    'viewport': 'body', 
}); 

$(document).on('click', '#div_button', function(event) 
{ 
    event.preventDefault(); 
    alert("Whent his is clicked, the popover closes :("); 
}); 

<div id="popover_content" style="display:none;"> 
    <div id="div_button">Click Me</div> 
</div>

編輯：這是我結束了與工作很好;

$('#popover_button').popover({ 
    'trigger': 'manual', 
    'container': '#element', /* element that moves on resize like popover_button */ 
    'html': true, 
    'content': function() { return $('#popover_content').html(); }, 
    'placement': 'bottom', 
    'viewport': 'body' 
}); 

$("#popover_button").click(function(e){$('#popover_button').popover('toggle');}); 

$(document).click(function(e){ 
    //popover_element is just what was inside #popover_button 
    if(e.target.id !== "popover_element" && !$(event.target).hasClass('popover-content')) 
     $("#popover_button").popover('hide'); 
});

來源

2015-02-18 bryan

什麼特別的原因默認彈出行爲/語法不好夠了嗎？像以下示例一樣：http://getbootstrap.com/javascript/#popovers – ochi 2015-02-18 00:53:12

當我單擊彈出窗口時，默認語法會關閉。任何語法真的，我已經嘗試了一切。 – bryan 2015-02-18 00:55:07

沒有任何鏈接的實時演示（這裏是Win7上的Chrome） - 我點擊按鈕，彈出窗口顯示;我點擊無處不在（popover內部/外部），並保持在那裏，直到我通過再次單擊該按鈕來解除它... – ochi 2015-02-18 00:58:18

您可能需要調整這一點：http://jsfiddle.net/6zcyfrqp/1/

HTML

<button type="button" class="btn btn-default">Popover on right</button> 

<div id="content" class="hidden">this is my awesome content 
    <br/>includes a 
    <button type="button" class="btn btn-default">save</button> button 
</div>

$(function() { 
    var options = { 
     content: function() { 
      return $("#content").html(); 
     }, 
     placement: "right", 
     container: "body", 
     toggle: "popover", 
     title: 'My Title', 
     html: true 
    }; 

    $('.btn').popover(options); 
});

來源

2015-02-18 01:13:32 ochi

感謝您的嘗試。我真的很感激時間。所以發生了什麼。我正在讓我的popover容器和popover按鈕本身一樣。這是我可以在頁面大小調整時實際保持粘貼的唯一方式。因此，當我點擊它時，它會切換。 **編輯**：那是我的問題。我必須將它附加到以相同方式隨文檔移動的其他內容。謝謝。 – bryan 2015-02-18 01:15:53

我看到了...你想添加一個更完整的代碼例子嗎？在不知道問題的全部要點的情況下很難在解決方案上工作......是否必須使用與容器和按鈕相同的元素？ – ochi 2015-02-18 01:18:11

是的，我知道，只是爲了解決我的具體問題而花費很長時間。對於那個很抱歉。但你幫了我很多！哈哈，有時你只需要解決它，想法就會流行到位。到目前爲止，我找不到任何與文檔一樣移動的東西，但我找到了一些東西。我只是注意到容器不能和popover觸發器元素相同。我唯一的問題在於在外部點擊時使其消失。 – bryan 2015-02-18 01:20:50

您可以試試這個。這是來自bootstrap的文檔。

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

來源

2015-02-18 00:49:45 wataru

'{「trigger」：「focus」}'在通過javascript執行操作時不執行任何操作。 – bryan 2015-02-18 00:51:30

讓我確定，你需要的是一個彈出式女巫的按鈕不會通過單擊按鈕關閉，它是正確的嗎？它工作正常。 [jsfiddle]（https://jsfiddle.net/wataruoguchi/5eqvh0cj/1/） – wataru 2015-02-18 01:29:45

焦點不適用於Safari瀏覽器。這是一個錯誤。 – bryan 2015-02-18 01:33:36

當在外面點擊不在彈出窗口上時關閉引導彈出窗口

回答

相關問題