进度条内的弹出框答案

【问题标题】：Popover within a progress bar进度条内的弹出框
【发布时间】：2015-12-05 11:25:20
【问题描述】：

所以我希望在单击进度条时在进度条下方显示一个 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>

【问题讨论】：

标签： php jquery html twitter-bootstrap popover

【解决方案1】：

在稍微摆弄一下脚本之后，我才真正想出了如何实现这一点，弹出框必须在进度条之外 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>

【讨论】：