是否可以使用 div 作为 Twitter Popover 的内容

我正在使用 twitter 的 bootstrap 的 popover 给你。现在，当我滚动弹出窗口的文本时，只有来自 <a>的 data-content属性的文本出现弹出窗口。我想知道有没有办法把 <div>放进酥饼里。可能的话，我想在这里使用 php 和 mysql，但是如果我可以让一个 div 工作，我想我可以解决其余的问题。我尝试将数据内容设置为一个 div ID，但它不起作用。

HTML:

<a class='danger'
data-placement='above'
rel='popover'
data-content='#PopupDiv'
href='#'>Click</a>
139171 次浏览
小开
最佳答案

首先，如果你想在内容中使用 HTML，你需要将 HTML 选项设置为 true:

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

然后您有两个选项来设置 Popover 的内容

  • 使用 data-content 属性。这是默认选项。
  • 使用自定义的 JS 函数返回 HTML 内容。

使用数据-内容 : 您需要转义 HTML 内容，如下所示:

<a class='danger' data-placement='above'
data-content="&lt;div&gt;This is your div content&lt;/div&gt;"
title="Title" href='#'>Click</a>

您可以手动转义 HTML，也可以使用函数。我不了解 PHP，但是在 Rails 中我们使用 * html _ safe * 。

使用 JS 函数 : 如果您这样做，您有几个选择。我认为最简单的方法是将 div 内容隐藏在任何你想隐藏的地方，然后编写一个函数将其内容传递给 popover。大概是这样:

$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});

然后你的 HTML 看起来像这样:

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>

希望能有帮助！

附言: 我在使用 popover 和不设置 title 属性时遇到了一些麻烦... ... 所以，记住总是设置 title。

小开

另一个替代的方法，如果你只是希望看起来和感觉弹出来。方法如下。当然，这是一个手动的东西，但很好地可行:)

HTML 按钮

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button>

HTML-popover

<div class="bgform popover fade bottom in">
<div class="arrow"></div>
..... your code here .......
</div>

JS

$("#bg").click(function(){
$('.bgform').slideToggle();
});
小开

基于 javi 的回答，这可以在没有 ID 或其他按钮属性的情况下完成，如下所示:

Http://jsfiddle.net/isherwood/e5ly5/

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My first popover content goes here.</div>


<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My second popover content goes here.</div>


<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My third popover content goes here.</div>


$('.popper').popover({
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
小开

派对迟到了。建立在其他解决方案的基础上。我需要一种方法来通过目标 DIV 作为 变量。我是这么做的。

HTML for Popover source (添加了一个数据属性 数据弹出，它将保存目标 DIV id/或 class 的值) :

<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">

HTML for Popover content (我使用 bootstrap hide 类) :

<div id="popper-content" class="hide">Content goes here</div>

剧本:

$('.popper').popover({
placement: popover_placement,
container: 'div.page-content',
html: true,
trigger: 'hover',
content: function () {
var pop_dest = $(this).attr("data-pop");
//console.log(plant);
return $("#"+pop_dest).html();
}});
小开

除了其他的回复。如果在选项中允许 html，那么可以将 jQuery对象传递给内容，并且它将被附加到 popover 的内容中，包含所有事件和绑定。下面是来自源代码的逻辑:

  • 如果您传递一个函数，它将被调用来打开内容数据
  • 如果不允许使用 html，则内容数据将作为文本应用
  • 如果 html允许，并且内容数据是字符串，它将被应用为 html
  • 否则内容数据将被附加到 popover 的内容容器中
$("#popover-button").popover({
content: $("#popover-content"),
html: true,
title: "Popover title"
});
小开 
here is an another example


<a   data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt;
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt;
&lt;/p&gt;&lt;/div&gt;
<?php echo $row1['4'] ?>   &lt;hr&gt;&lt;div&gt;
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow  &lt;/button&gt;  &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt;   &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close  &lt;/button&gt;  &lt;/span&gt;


&lt;/div&gt;">


<?php echo $row1['1'] ?>
</a>
小开

为什么这么复杂? 只要把这个:

data-html='true'
小开

所有这些答案都忽略了一个非常重要的方面

通过使用。Html 或 innerHtml 或 outerHtml 实际上并没有使用引用的元素。您正在使用元素的 html 的一个副本。这有一些严重的缺点。

  1. 您不能使用任何 id，因为 id 将被复制。
  2. 如果每次弹出窗口显示时都加载内容，那么将丢失用户的所有输入。

您要做的是将对象本身加载到 popover 中。

Https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

HTML:

<h1> Test </h1>


<div><button id="target">click me</button></div>


<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<h1>Extra Stuff</h1>
<input type='number' placeholder='number'/>
</div>

JQuery:

$(document).ready(function() {


// We don't want to see the popover contents until the user clicks the target.
// If you don't hide 'blah' first it will be visible outside of the popover.
//
$('#blah').hide();


// Initialize our popover
//
$('#target').popover({
content: $('#blah'), // set the content to be the 'blah' div
placement: 'bottom',
html: true
});
// The popover contents will not be set until the popover is shown.  Since we don't
// want to see the popover when the page loads, we will show it then hide it.
//
$('#target').popover('show');
$('#target').popover('hide');


// Now that the popover's content is the 'blah' dive we can make it visisble again.
//
$('#blah').show();




});

提交答案