Twitter Bootstrap 弹出窗口中的 HTML

Question

我正在尝试在 Bootstrap 弹出窗口中显示 HTML，但不知何故无法正常工作。我在这里找到了一些答案，但它对我不起作用。如果我做错了什么，请告诉我。

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

Answer 1

您不能使用 <li href="#"因为它属于 <a href="#"这就是它不起作用的原因，更改它，一切都很好。

这里正在工作 JSFiddle 它向您展示了如何创建 Bootstrap 弹出框。

相关部分代码如下:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

顺便说一句，你总是至少需要 $("[data-toggle=popover]").popover();启用弹出窗口。但是代替 data-toggle="popover"你也可以使用 id="my-popover"或 class="my-popover" .请记住启用它们，例如:$("#my-popover").popover();在这些情况下。

这是完整规范的链接: <强> Bootstrap Popover

奖励:

如果出于某种原因您不喜欢或无法从 data-content 中读取弹出窗口的内容和 title标签。您也可以使用例如隐藏的 div 和更多的 JavaScript。这是一个 example 关于那个。