Twitter Bootstrap 弹出窗口中的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13202762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML inside Twitter Bootstrap popover
提问by Adrian Mojica
I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
我试图在引导程序弹出窗口中显示 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>
回答by Mauno V?h?
You cannot use <li href="#"since it belongs to <a href="#"that's why it wasn't working, change it and it's all good.
你不能使用，<li href="#"因为它属于<a href="#"这就是它不起作用的原因，改变它，一切都很好。
Here is working JSFiddlewhich shows you how to create bootstrap popover.
这是正在运行的JSFiddle，它向您展示了如何创建引导程序弹出窗口。
Relevant parts of the code is below:
代码的相关部分如下：
HTML:
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:
JavaScript：
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
And by the way, you always need at least $("[data-toggle=popover]").popover();to enable the popover. But in place of data-toggle="popover"you can also use id="my-popover"or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover();in those cases.
顺便说一句，您始终至少$("[data-toggle=popover]").popover();需要启用弹出窗口。但data-toggle="popover"你也可以使用id="my-popover"or代替class="my-popover"。请记住$("#my-popover").popover();在这些情况下使用 eg: 启用它们。
Here is the link to the complete spec: Bootstrap Popover
这是完整规范的链接： Bootstrap Popover
Bonus:
奖金：
If for some reason you don't like or cannot read content of a popup from the data-toggleand titletags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an exampleabout that.
如果由于某种原因您不喜欢或无法从data-toggle和title标签读取弹出窗口的内容。您还可以使用例如隐藏的 div 和更多的 JavaScript。这是一个关于此的示例。
回答by Dennis Münkle
you can use attribute data-html="true":
您可以使用属性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>
回答by Hyman
Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-contentand use it like this:
另一种以可重用方式指定弹出框内容的方法是创建一个新的数据属性data-popover-content，并像这样使用它：
HTML:
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:
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();
}
});
});
This can be useful when you have a lot of html to place into your popovers.
当您将大量 html 放入弹出窗口时，这会很有用。
Here is an example fiddle: http://jsfiddle.net/z824fn6b/
这是一个示例小提琴：http: //jsfiddle.net/z824fn6b/
回答by Mike Lucid
You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):
您需要创建一个启用了 html 选项的 popover 实例（将其放在您的 javascript 文件中的 popover JS 代码之后）：
$('.popover-with-html').popover({ html : true });
$('.popover-with-html').popover({ html : true });
回答by user3319310
I used a pop over inside a list, Im giving an example via HTML
我在列表中使用了一个弹出窗口，我通过 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>'>
回答by Tiago Piovesan
You only need put data-html="true"in the link popover. Is gonna work.
您只需要放入data-html="true"链接弹出窗口。会工作。
回答by Marc A
This is a slight modification on Hyman's excellent answer.
这是对Hyman 出色回答的轻微修改。
The following makes sure simple popovers, without HTML content, remain unaffected.
以下内容确保没有 HTML 内容的简单弹出框不受影响。
JavaScript:
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();
}
});
});
回答by Tom Sarduy
This is an old question, but this is another way, using jQuery to reuse the popover and to keep using the original bootstrap data attributes to make it more semantic:
这是一个老问题，但这是另一种方式，使用 jQuery 重用弹出窗口并继续使用原始引导数据属性使其更具语义：
The link
链接
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
Custom content to show
要显示的自定义内容
<!-- 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
Javascript
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
Fiddle with complete example: http://jsfiddle.net/tomsarduy/262w45L5/
摆弄完整的例子：http: //jsfiddle.net/tomsarduy/262w45L5/
回答by user1079877
I really hate to put long HTML inside of the attribute, here is my solution, clear and simple (replace ? with whatever you want):
我真的很讨厌在属性中放置很长的 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});
回答by Guy Biber
You can change the 'template/popover/popover.html' in file 'ui-bootstrap-tpls-0.11.0.js' Write: "bind-html-unsafe" instead of "ng-bind"
您可以更改文件 'ui-bootstrap-tpls-0.11.0.js' 中的 'template/popover/popover.html' 写入：“bind-html-unsafe”而不是“ng-bind”
It will show all popover with html. *its unsafe html. Use only if you trust the html.
它将显示所有带有 html 的弹出窗口。*它不安全的html。仅当您信任 html 时才使用。
