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>

- Adrian Mojica

---

我在这里回答了相同的问题：用于标准化引导弹出的代码：多个弹出窗口、关闭按钮、关闭弹出窗口外部以及具有自定义HTML的弹出窗口。 - Olga

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（简称JS）：

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

顺便说一下，你总是需要至少使用$("[data-toggle=popover]").popover();来启用弹出框。但是你也可以使用id="my-popover"或class="my-popover"代替data-toggle="popover"。只需要记住在这些情况下使用类似于$("#my-popover").popover();的方法来启用它们。

这里是完整规范的链接： Bootstrap 弹出框

额外提示：

如果由于某种原因你不喜欢或无法阅读data-content和title标签中的内容，也可以使用隐藏的div以及更多的JavaScript。这里有一个关于这个例子的示例。

- Mauno Vähä

---

移除锚点标签上的HREF href="#"，以防止页面滚动到顶部！ - peter_pilgrim

@peter_pilgrim 谢谢你的回复。我更新了我的答案，使用了最新版本的bootstrap，并将<a>标签中的href="#"删除，使它们像按钮一样工作（这也在bootstrap网站上有文档）。我在答案的末尾添加了该链接。 - Mauno Vähä

我发现iOS设备存在问题。弹出窗口在触摸屏上无法正常工作。你有找到通用解决方法吗？实际上，我认为这也会发生在Bootstrap的弹出窗口代码中。有什么想法吗？ - peter_pilgrim

自Bootstrap 5.0以来的重大变更 - 数据属性被命名空间化（-bs-），以将Bootstrap功能与自己的代码和第三方代码分开。因此，在此示例中，您需要将data-html => data-bs-html，data-toggle => data-bs-toggle，data-trigger => data-bs-trigger，data-content => data-bs-content进行更改。 - MrD

Answer 2

您可以使用属性 data-html="true" ：

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>

- Dennis Münkle

---

有没有办法在gwtbootstrap3中使用它，因为它以当前形式无法工作。我已经在这里提出了问题http://stackoverflow.com/questions/34142815/how-to-enable-html-in-popover-or-tooltip-in-gwtbootstrap3，但是到目前为止还没有答案。 - Ivan Bilan

不知道为什么上面的答案被标记为正确。也许人们故意选择最复杂的选项来保留他们的工作。 - tread

我在页面底部有一个弹出框，它工作得很好，除了一点...它会把我带回页面顶部。我将其设置在Bootstrap缩略图的foreach循环中。有什么想法吗？ - foxtangocharlie

Answer 3

另一种可重用指定气泡框内容的方式是创建一个新的数据属性，例如 data-popover-content，并像这样使用它：

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

在您需要将大量HTML放入弹出窗口时，这非常有用。

以下是示例代码: http://jsfiddle.net/z824fn6b/

- Jack

---

这种模块化的方法非常优雅。你可以拥有许多弹出窗口，只需一个通用的JavaScript函数。 - xtian

太好了，@Jack，谢谢你。我喜欢不用把HTML代码放在属性里，那太乱了。 - John Washam

做得很棒，喜欢它的简洁和易用性。 - FastTrack

你是真正的MVP。 - plushyObject

它似乎无法与bootstrap 3.4.1一起工作，你能帮忙吗？@Jack https://dev59.com/Jrnoa4cB1Zd3GeqPTppu - user2513846

Answer 4

您需要创建一个带有html选项的popover实例（将此代码放置在popover JS代码之后的JavaScript文件中）：

``` $('.popover-with-html').popover({ html : true }); ```

- Mike Lucid

Answer 5

我在列表中使用了一个弹出框，以下是通过HTML提供的示例：

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>

- user3319310

---

使用不同的引号来包装HTML代码是最简单的方法。想法很好。 - Jimmy Ilenloa

不错，真正的诀窍是将双引号改为单引号！ - Steven Barragán

Answer 6

您只需要在链接弹出框中添加data-html="true"。它就会起作用。

- Tiago Piovesan

Answer 7

这是一个老问题，但这是另一种方法，使用jQuery重用弹出框并继续使用原始的Bootstrap数据属性使其更具语义性：

链接

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

自定义内容展示

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

完整示例程序如下： http://jsfiddle.net/tomsarduy/262w45L5/

- Tomas Ramirez Sarduy

Answer 8

这是对杰克的优秀答案稍作修改的结果。

以下内容确保不带HTML内容的简单弹出框不受影响。

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

- Marc A

Answer 9

在最新版本的Bootstrap 4.6中，如果要添加复杂的HTML代码，可能需要使用 sanitize:false 。

$('.popover-with-html').popover({ html : true, sanitize : false })

- Sahil Jain

Answer 10

适用于Bootstrap >= 5.2

启用弹出框中的HTML内容: data-bs-html="true"

示例:

<a href="#"
  data-bs-toggle="popover"
  data-bs-title="A Title"
  data-bs-html="true"
  data-bs-content="This is <strong>bold</strong>">popover</a>

文档：https://getbootstrap.com/docs/5.3/components/popovers/#options

该页面介绍了Bootstrap中弹出框（Popovers）的选项，包括触发方式、位置、内容、外观等。可以通过设置选项来自定义弹出框的行为和样式。对于希望使用Bootstrap中弹出框的开发者来说，这是一个非常有用的参考资料。

- loopasam