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>
430549 次浏览
小开

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

$('.popover-with-html').popover({ html : true });

小开
最佳答案

你不能使用<li href="#"，因为它属于<a href="#"，这就是为什么它不能工作，改变它，一切都好。

这里是working 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();来启用弹出窗口。但是你也可以使用id="my-popover"或class="my-popover"来代替data-toggle="popover"。记住在这些情况下使用e.g.: $("#my-popover").popover();来启用它们。

以下是完整规范的链接: 引导弹窗 < / >强

奖金:

如果由于某种原因你不喜欢或不能从data-content和title标记中读取弹出框的内容。你也可以使用隐藏的div和一些JavaScript。这里有一个example。

小开

你可以使用属性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>'>
小开

我真的很讨厌把长HTML内的属性，这是我的解决方案，清楚和简单(替换?随你喜欢):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>

然后

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
小开
你可以修改文件ui-bootstrap-tpls-0.11.0.js中的'template/popover/popover.html' 把"ng-bind"改为"bind-html-unsafe"

它将用html显示所有弹出窗口。 这是不安全的html。

.

.
小开

另一种以可重用的方式指定弹出窗口内容的方法是创建一个新的数据属性，如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内容的简单弹出窗口不受影响。

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();
}
});
});
小开

这是一个老问题，但这是另一种方式，使用jQuery重用弹出窗口，并继续使用原始的引导数据属性，使其更具语义性:

的链接

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>

显示的自定义内容

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Javascript

$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
完整的例子: http://jsfiddle.net/tomsarduy/262w45L5/ < / p >
小开

你只需要在链接弹出窗口中放入data-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>

小开

在bootstrap 4.6的最新版本中，您可能还需要使用sanitize:false来添加复杂的html。

$('.popover-with-html').popover({ html : true, sanitize : false })
小开

实际上，如果你在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',
],
},
},
]

我把我的模板(每一个应用程序)在<project dir>/templates/<app name>文件夹。我有MyMainApp/popover_content.html在MyMainApp/home.html旁边，上面的示例代码是测试的。但如果你把模板放在每个应用的Django文件夹中，那么你需要添加“MyApp/templates"TEMPLATES[0]{'DIRS': ['MyApp/templates', 'MyApp2/templates']}列表。

因此，至少这将使您能够将弹出窗口HTML以常规的、语法高亮显示的Django模板格式放置，并很好地利用将Django模板模块化为组件。

我个人打算用它来做一个可编辑的标签(标题和描述字段的一些数据在我的应用程序)。

一个缺点是如果你在包含:"{% include './popover_content.html' %}", then you must use single quotes all throughout the 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模板文件。问题解决了!

enter image description here


提交答案