Twitter Bootstrappopup窗口中的HTML
我试图显示一个引导弹窗内的HTML，但不知何故，它不工作。 我在这里find了一些答案，但它不适合我。 请让我知道如果我做错了什么。
<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> 你不能使用<li href="#"因为它属于<a href="#" ，这就是为什么它不工作，改变它，这一切都很好。
这里是工作JSFiddle它向您展示如何创build引导popup窗口。
代码的相关部分如下：
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(); });
顺便说一句，你总是至less需要$("[data-toggle=popover]").popover(); 以启用popover。 但是，也可以使用id="my-popover"或class="my-popover"来代替data-toggle="popover" class="my-popover" 。 只要记住启用它们，例如： $("#my-popover").popover(); 在这些情况下。
以下是完整规范的链接： Bootstrap Popover
奖金：
如果由于某种原因，您不喜欢（或不能）从data-toggle和title标签中读取popup窗口的内容。 你也可以使用隐藏的div和更多的JavaScript。 这里是一个例子 。
干杯。
你可以使用属性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>
您需要创build一个启用了html选项的popover实例（在popup的JS代码之后将其放置在您的javascript文件中）：
$('.popover-with-html').popover({ html : true });
以可重复使用的方式指定popup式内容的另一种方法是创build一个新的数据属性，如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放入你的popovers时，这可能是有用的。
这里是一个例子小提琴： http : //jsfiddle.net/z824fn6b/
我在列表中使用了一个popup窗口，我通过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>'>
这是杰克杰出的答案的一个小小的修改。
以下确保简单的popup，没有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(); } }); });
我真的很讨厌在属性中放置很长的HTML，下面是我的解决scheme，清晰简单（用任何你想要的replace）：
<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});
这是一个古老的问题，但这是另一种方式，使用jQuery重用popup窗口，并继续使用原始的引导数据属性，使其更加语义化：
链接
<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/
你可以在文件'ui-bootstrap-tpls-0.11.0.js'中改变'template / popover / popover.html'写：“bind-html-unsafe”而不是“ng-bind”
它会显示所有与HTML的popup。 *其不安全的HTML。 仅当您信任该HTML时才使用。
