Twitter Bootstrap弹出窗口中的HTML

我正在尝试在自举弹出窗口中显示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>

您不能使用，<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"或代替您class="my-popover"。$("#my-popover").popover();在这些情况下，请记住使用例如：启用它们。

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

奖金：

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

您可以使用attribute 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>

以可重用的方式指定弹出窗口内容的另一种方法是创建一个新的data属性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/

您需要创建一个启用了html选项的popover实例（将其放置在您的JavaScript文件中，位于popover JS代码之后）：

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

我在列表中使用了弹出窗口，我通过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>'>

您只需要放入data-html="true"链接弹出窗口。会工作。

这是对杰克出色回答的略微修改。

下面确保没有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();
        }
    });
});

我真的很讨厌将长HTML放在属性内，这是我的解决方案，简洁明了（用任何您想要的替换？）：

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

然后

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

这是一个古老的问题，但这是另一种方法，使用jQuery重用弹出窗口并继续使用原始的引导程序数据属性使其更具语义：

链接

<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>

Java脚本

$('[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/

您可以在文件'ui-bootstrap-tpls-0.11.0.js'中更改'template / popover / popover.html'。写：“ bind-html-unsafe”而不是“ ng-bind”

它将显示所有带有html的弹出窗口。*不安全的html。仅当您信任html时使用。

您可以使用popover事件，并通过属性“ data-width”控制宽度

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});

 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>

将其添加到popper.js文件的底部：

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

来源：https : //github.com/twbs/bootstrap/issues/23590