我试图在一个引导弹窗内显示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>

当前回答

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

其他回答

你需要创建一个启用了html选项的弹出窗口实例(将其放在弹出窗口JS代码之后的javascript文件中):

$ (' .popover-with-html ')。弹出窗口({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();
        }
    });
});

你可以更改文件'ui-bootstrap-tpls-0.11.0.js'中的'template/popover/popover.html' 把“ng-bind”改为“bind-html-unsafe”

它会用html显示所有弹出窗口。 这是不安全的html。仅当您信任html时使用。

你只需要把data-html="true"的链接弹出窗口。会有用的。

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