Can Bootstrap彈出不會被破壞？

是否有可能有一個引導（v3）彈出來讓它的div在頁面加載開始時正確加載並且在切換時不會被銷燬？Can Bootstrap彈出不會被破壞？

我有一個div一個酥料餅的內容：

<div id="popoverContent"> 
<h1>Stuff</h1> 
<p>I'm in a popover!</p> 
</div>

和一個按鈕用來切換酥料餅：

這裏是處理按鈕，我的Javascript代碼推：

<script> 
var x = false; 
$('[data-toggle=popover]').popover({ 
    content: $('#popoverContent').html(), 
    html: true 
}).click(function() { 
    if (x) { 
     $(this).popover('hide'); 
     x = false; 
    } 
    else { 
    $(this).popover('show'); 
    x = true; 
    } 
}); 
</script>

問題是，當調用$(this).popover('show');時，會創建一個div。像這樣的檢查元素（鉻）最多顯示：

<div class="popover fade left in" role="tooltip" id="popover460185" style="top: 430.5px; left: 2234px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"> 
    <h1>Stuff</h1> 
    <p>I'm in a popover!</p> 
</div></div>

但再次單擊該按鈕時，整個DIV本身被刪除，從頁面抹殺。是否有可能在頁面加載期間創建popover div（隱藏儘管），並且可以切換而不需要刪除div。

來源

2016-02-28 EndenDragon

爲何重要以及你想解決哪些具體問題？ – charlietfl

我想在popoverContent div內有一個音頻。當有人玩它的時候，即使他們關閉了彈出窗口（或導航到不同的頁面，我確實與AJAX一起工作），玩家仍會繼續玩遊戲。但是，當關閉頁面上的彈出窗口時，音頻停止播放。我需要一個解決方案來保持音頻加載，即使popover關閉。 – EndenDragon

如果您導航到其他頁面，則無法保持音頻播放。只能在單個頁面應用中執行此操作 – charlietfl

作爲評價所述，目前還不能與自舉3.酥料餅（其爲工具提示的擴展）是動態上show創建和拆卸可能（使用jQuery.detach）從上hide的DOM。

這可能是最好的推出自己的JavaScript，並簡單地利用Bootstrap的CSS。然而，你可以很容易地使用補丁以下可以作爲一個首發位置的酥料餅的事件API -the的功能：

$(function() { 

    var content = $('#popover-content'), // Pre defined popover content. 
     popover = $('#popover-anchor').popover(); 

    popover.on('inserted.bs.popover', function() { 
    var instance = $(this).data('bs.popover'); 
    // Replace the popover's content element with the 'content' element 
    instance.$tip = content; 
    }); 

    popover.on('shown.bs.popover', function() { 
    var instance = $(this).data('bs.popover'); 
    // Remove the reference to 'content', so that it is not detached on hide 
    instance.$tip = null; 
    }); 

    popover.on('hide.bs.popover', function() { 
    // Manually hide the popover, since we removed the reference to 'content' 
    content.removeClass('in'); 
    content.addClass('out'); 
    }); 

});

Codepen

來源

2016-02-28 23:18:39 jtrumbull

Can Bootstrap彈出不會被破壞？

回答

相關問題