Twitter Bootstrap 弹出框内的 HTML
Posted
技术标签:
【中文标题】Twitter Bootstrap 弹出框内的 HTML【英文标题】：HTML inside Twitter Bootstrap popover 【发布时间】：2012-10-23 13:21:34 【问题描述】：我试图在引导弹出窗口中显示 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>
【问题讨论】：
我在这里回答了同样的问题：Code for normalization bootstrap popovers: multiply popovers, close button, close outside the popover, and popover with custom HTML. 【参考方案1】：你不能使用<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(); 才能启用弹出框。但您也可以使用id="my-popover" 或class="my-popover" 代替data-toggle="popover"。请记住在这些情况下使用例如：$("#my-popover").popover(); 启用它们。
这是完整规范的链接： Bootstrap Popover
奖励：
如果由于某种原因您不喜欢或无法从data-content 和title 标签读取弹出内容。您也可以使用例如隐藏的 div 和更多的 javascript。这是关于此的example。
【讨论】：
移除 ANCHOR 标签元素上的 HREF href="#" 以防止滚动到页面顶部！ @peter_pilgrim 谢谢你这么说。我更新了我的答案以使用最新版本的引导程序并从 标记中修复了 href="#" 并使它们的行为类似于按钮。 （这也记录在引导站点上）。将该链接添加到我的答案末尾。 我发现 ios 设备存在问题。弹出框确实适用于触摸屏。你有没有找到一个通用的工作？实际上，我认为这也发生在 Bootstrap 弹出代码中。有什么想法吗？ 自 Bootstrap 5.0 以来的重大变化 - 数据属性被命名空间 (-bs-) 以使引导功能与自己的代码和第三方分开。所以在这个例子中，你需要改变data-html => data-bs-html，data-toggle => data-bs-toggle，data-trigger => data-bs-trigger，data-content => data-bs-content。【参考方案2】：
你可以使用属性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>
【讨论】：
有没有办法在gwtbootstrap3中使用，在这种形式下不行。我已经在这里***.com/questions/34142815/…问过这个问题，但到目前为止没有答案。 不知道为什么上面的答案被标记为正确。也许人们故意选择最复杂的选项来保住他们的工作。 我的页面底部有这个弹出窗口，效果很好，除了......它让我一直回到页面顶部。我将它设置在引导缩略图的 foreach 循环中。有什么想法吗？【参考方案3】：另一种以可重用方式指定弹出框内容的方法是创建一个新的数据属性，如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/
【讨论】：
这种模块化方法非常优雅。你可以有很多弹出框，只有一个通用的 javascript 函数。 这太好了，@Jack，谢谢。我喜欢不必将 HTML 放入属性中。好乱。 这里的工作很棒，喜欢它的简单性和可用性 你才是真正的MVP 它似乎不适用于 bootstrap 3.4.1，您能帮忙吗？ @杰克***.com/questions/60514533/…【参考方案4】：您需要创建一个启用了 html 选项的弹出框实例（将其放在弹出框 JS 代码之后的 javascript 文件中）：
$('.popover-with-html').popover( html : true );
【讨论】：
【参考方案5】：我在列表中使用了弹出框，我通过 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 代码。不错的想法。 不错，真正的技巧是将双引号改为单引号！【参考方案6】：您只需将data-html="true" 放入链接弹出框。会工作的。
【讨论】：
【参考方案7】：这是一个老问题，但这是另一种方式，使用 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/
【讨论】：
【参考方案8】：这是对Jack's excellent answer的轻微修改。
以下内容确保没有 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();
);
);
【讨论】：
【参考方案9】：我真的很讨厌在属性中放入长 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);
【讨论】：
【参考方案10】：在最新版本的 bootstrap 4.6 上，您可能还需要使用 sanitize:false 来添加复杂的 html。
$('.popover-with-html').popover( html : true, sanitize : false )
【讨论】：
【参考方案11】：您可以更改文件 'ui-bootstrap-tpls-0.11.0.js' 中的 'template/popover/popover.html' 写：“bind-html-unsafe”而不是“ng-bind”
它将显示所有带有 html 的弹出窗口。 *它不安全的html。仅在您信任 html 时使用。
【讨论】：
【参考方案12】：可以使用popover事件，通过属性'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- title="title-popover" data-content="html-content-code">
<i class="far fa-question-circle"></i>
</a>【讨论】：
【参考方案13】：实际上，如果您将 Bootstrap5 与 Django 一起使用，那么他们将内容作为字符串传递的方法是完美的，并且符合 Django 的模板包含。您可以使用您需要的任何部分 HTML 创建一个模板文件，例如，对于 Bootstrap5 似乎没有 X-editable 似乎可以工作，所以您可能希望与 Ok|Cancel 按钮一起进行行编辑作为内容.无论如何，这就是我的意思：
<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/home.html 旁边有MyMainApp/popover_content.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模板文件。问题解决了！
【讨论】：
以上是关于Twitter Bootstrap 弹出框内的 HTML的主要内容，如果未能解决你的问题，请参考以下文章