進度條內的彈出式對話框

所以我正在尋找在進度條被點擊時在進度條下面顯示彈出式選項卡。目前，當我點擊進度條時，我可以啓動彈出窗口，並且進度條似乎可以像附加的附加功能一樣工作。進度條內的彈出式對話框

我遇到的問題是，當您單擊進度條來顯示彈出窗口時，該選項卡是否在欄本身內？好像酒吧是重疊的，然後切掉剩餘的Popover，所以我只能看到一半的進度條和一半的popover白盒子。由於進度條覆蓋彈出窗口，無法看到任何文本。

當點擊酥料餅應該在進度條的下方顯示很好的進度條？任何想法，我可能會解決這個問題？這裏是我的代碼：

<div class="progress"> 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> 

    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover"><span style="position:absolute; right:0; left:0; top: 0; z-index: 2; text-align: center; width: 100%; color:#333; alignment-adjust:middle;">Add display Image</span></a> 

    </div> 
</div> 
<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 
</script>

來源

2015-12-05 Snappysites

我從字面上只是想出瞭如何使用腳本週圍擺弄一點點後實現這一目標，酥料餅必須是外面的進度條div的和data-placement補充說：

<a href="#" data-toggle="popover" data-placement="bottom" title="Popover Header" data-content="Some content inside the popover"> 
<div class="progress"> 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> 

    <span style="position:absolute; right:0; left:0; top: 0; z-index: 2; text-align: center; width: 100%; color:#333; alignment-adjust:middle;">Add display Image</span> 

    </div> 
</div> 
</a> 
<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 
</script>

來源

2015-12-05 11:35:22 Snappysites

進度條內的彈出式對話框

回答

相關問題