我试图在一个引导弹窗内显示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>
当前回答
你可以更改文件'ui-bootstrap-tpls-0.11.0.js'中的'template/popover/popover.html' 把“ng-bind”改为“bind-html-unsafe”
它会用html显示所有弹出窗口。 这是不安全的html。仅当您信任html时使用。
其他回答
你可以使用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给出了一个例子
<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>'>
在bootstrap 4.6的最新版本中，您可能还需要使用sanitize:false来添加复杂的html。
$('.popover-with-html').popover({ html : true, sanitize : false })
这是对杰克的精彩回答稍加修改。
下面的代码确保不含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();
}
});
});
你只需要把data-html="true"的链接弹出窗口。会有用的。
