Twitter Bootstrap 弹出框内的 HTML

小编典典

Twitter Bootstrap 弹出框内的 HTML

all

我试图在引导弹出窗口中显示 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>

阅读 67

2022-04-19

共1个答案

小编典典

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

这是正在工作的 JSFiddle ，它向您展示了如何创建引导弹出窗口。

代码的相关部分如下：

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"or代替class="my-popover"。只要记住使用
eg:$("#my-popover").popover();在这些情况下启用它们。

这是完整规范的链接： Bootstrap
Popover

奖金：

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

2022-04-19