我试图在一个引导弹窗内显示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>
当前回答
我使用了一个弹出在一个列表，我通过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>'>
其他回答
我使用了一个弹出在一个列表，我通过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-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选项的弹出窗口实例(将其放在弹出窗口JS代码之后的javascript文件中):
$ (' .popover-with-html ')。弹出窗口({HTML: true});
你可以使用弹窗事件，并通过属性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>
你只需要把data-html="true"的链接弹出窗口。会有用的。
