Twitter Bootstrap弹出窗口中的HTML [英] HTML inside Twitter Bootstrap popover

问题描述

我试图在引导弹出窗口中显示HTML，但不知何故它不起作用。我在这里找到了一些答案，但它不适用于我。请让我知道如果我做错了什么。

 < script> 
 $（function（）{
 $（'[rel = popover]'）。popover（{
 html：true，
 content：function（）{
返回$（'＃popover_content_wrapper'）。html（）; 
} 
}）; 
}）; 
< / script> 
 
< li href =＃id =example =popoverdata-content =data-original-title =A Title> 
 popover 
< / li> 
 
< div id =popover_content_wrapperstyle =display：none> 
< div>这是您的div内容< / div> 
< / div> 
  

解决方案

您无法使用<因为它属于< a href =＃，所以它不工作，改变它，它是都好。

这里是 JSFiddle > HTML：

 <！ -  
注意：Popover内容是从数据内容和标题标签。 
  - > 
  class =btn btn-lg btn-primary
 role =button
 data-html =true
数据切换=弹出窗口
数据触发=焦点
 title =< b>示例弹出窗口< / b>  - 标题
 data-content =< div>< b>范例弹出窗口< / b>  - 内容< / div>>范例弹出窗口< / a> 
  

JavaScript：

  $（function（）{
 //启用弹出窗口
 $（[data-toggle = popover]）。popover（）; 
}）; 
  

顺便说一句，您总是需要至少 $（[data-toggle = popover]）。popover（）; 来启用popover。但是也可以使用 id =my-popover或者 data-toggle =popover code>类= 我的-酥料饼。请记住在这些情况下使用例如： $（＃my-popover）。popover（）; 。

以下是完整规范的链接：
Bootstrap Popover
$ b 奖金： 如果由于某种原因，您不喜欢（或不能）从数据切换和标题标签中读取弹出窗口的内容。您也可以使用例如隐藏的divs和更多的JavaScript。这里有一个 示例 。

干杯。

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.

<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>

解决方案

You cant use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.

Here is working JSFiddle which shows you how to create bootstrap popover.

Relevant parts of the code is below:

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

And btw, 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.

Here is the link to the complete spec: Bootstrap Popover

Bonus:

If for some reason you dont like (or cant) read content of a popup from the data-toggle and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.

Cheers.

这篇关于Twitter Bootstrap弹出窗口中的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！