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>
第3607篇《Twitter Bootstrap弹出窗口中的HTML》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
您只需要放入data-html="true"链接弹出框。会工作。
以可重用的方式指定弹出窗口内容的另一种方法是创建一个新的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/
您可以使用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>
相似问题
问题类别
将其添加到popper.js文件的底部：
Source: https://github.com/twbs/bootstrap/issues/23590