我试图在一个引导弹窗内显示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>
当前回答
实际上，如果你在Django中使用Bootstrap5，那么他们将内容作为字符串传递的方法是完美的，并且与Django的模板包含是一致的。你可以用你需要的任何部分HTML创建一个模板文件，例如，Bootstrap5似乎没有x - edititable，所以你可能想要做一个行编辑和Ok|取消按钮作为内容。总之，这就是我的意思:
<button data-bs-content="{% include './popover_content.html' %}" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" >
Click to toggle popover
</button>
我的settings.py模板部分是这样的:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True, # True is necessary for django-bootstrap5 to work!
'OPTIONS': {
'debug': True,
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
我把我的模板(每一个应用程序)在<项目目录>/模板/<应用程序名称>文件夹。我有MyMainApp/popover_content.html右边的MyMainApp/home.html上面的示例代码进行了测试。但是如果你把模板放在每个应用的Django文件夹中，那么你需要在templates [0]{'DIRS': ['MyApp/templates'， 'MyApp2/templates']}列表中添加"MyApp/templates"。
因此，至少这将使您能够将弹出窗口HTML以常规的、语法高亮显示的Django模板格式放置，并很好地利用将Django模板模块化为组件。
我个人打算用它来做一个可编辑的标签(标题和描述字段的一些数据在我的应用程序)。
一个缺点是如果你在包含:"{% include './popover_content.html' %}"时使用双引号(")，那么你必须在整个popover_content.html'模板中使用单引号。
你还需要为弹出窗口启用html，所以你的站点范围的弹出窗口初始化器会这样:
<script type="text/javascript">
$(document).ready(() => {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(
function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true,
});
});
});
</script>
下面是(无样式的)结果。总之，使用默认提供的字符串方法进行传入，并传入一个包含的Django模板文件。问题解决了!
其他回答
我真的很讨厌把长HTML内的属性，这是我的解决方案，清楚和简单(替换?随你喜欢):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
then
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
你只需要把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();
}
});
});
你不能使用<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();在这些情况下。
以下是完整规范的链接: 引导弹窗
奖金:
如果出于某种原因，您不喜欢或无法从数据内容和标题标签中读取弹出窗口的内容。你也可以使用隐藏的div和一些JavaScript。这里有一个例子。
对于引导>= 5.2
在弹窗中启用HTML内容:data-bs-html="true"
例子:
<a href="#"
data-bs-toggle="popover"
data-bs-title="A Title"
data-bs-html="true"
data-bs-content="This is <strong>bold</strong>">popover</a>
道格:https://getbootstrap.com/docs/5.3/components/popovers/选项
