是否可以使用一个div作为Twitter的Popover的内容
我在这里使用twitter的bootstrap popover。 现在，当我滚动popup文本时，popup窗口会显示<a>的data-content属性中的文本。 我想知道是否有一个<div>在popover里面。 有可能，我想在那里使用PHP和MySQL，但如果我能得到一个工作的div我想我可以找出其余的。 我试图设置数据内容到一个div ID，但它没有奏效。
HTML：
<a class='danger' data-placement='above' rel='popover' data-content='#PopupDiv' href='#'>Click</a>
首先，如果要在内容中使用HTML，则需要将HTML选项设置为true：
$('.danger').popover({ html : true});
然后你有两个选项来设置Popover的内容
- 使用数据内容属性。 这是默认选项。
- 使用返回HTML内容的自定义JS函数。
使用数据内容 ：您需要转义HTML内容，如下所示：
<a class='danger' data-placement='above' data-content="<div>This is your div content</div>" 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>
希望能帮助到你！
PS：使用popup窗口时，我遇到了一些麻烦，而不是设置标题属性…所以，请记住总是设置标题。
build立在jävi的答案，这可以做到没有ID或像这样的附加button属性：
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(); } });
另一种方法，如果你只是想看看stream行的感觉。 以下是方法。 Offcourse这是一个手动的东西，但很好的可行:)
HTML – button
<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 – popup窗口
<div class="bgform popover fade bottom in"> <div class="arrow"></div> ..... your code here ....... </div>
JS
$("#bg").click(function(){ $('.bgform').slideToggle(); });
晚会到了晚会 build立其他解决scheme。 我需要一种将目标DIV作为variables传递的方法。 这是我做的。
用于Popover源代码的HTML（添加了一个数据属性data-pop ，它将保存目标DIV ID /或类的值）：
<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">
用于Popover内容的HTML（我正在使用bootstrap隐藏类）：
<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和内容数据是string，它将被应用为html - 否则内容数据将被附加到popup窗口的内容容器
$("#popover-button").popover({ content: $("#popover-content"), html: true, title: "Popover title" });
所有这些答案错过了一个非常重要的方面！
通过使用.html或innerHtml或outerHtml你实际上并没有使用被引用的元素。 您正在使用元素的html的副本。 这有一些严重的缺点。
- 您不能使用任何ID，因为ID将被复制。
- 如果每次显示popup窗口时都加载内容，则会丢失用户的所有input。
你想要做的是将对象本身加载到popup窗口中。
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(); });
here is an another example <a data-container = "body" data-toggle = "popover" data-placement = "left" data-content = "<img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' ><div><h3> <?php echo $row1['1'] ?></h3> <p> <span><?php echo $countsss ?>videos </span> <span><?php echo $countsss1 ?> followers</span> </p></div> <?php echo $row1['4'] ?> <hr><div> <span> <button type='button' class='btn btn-default pull-left green'>Follow </button> </span> <span> <button type='button' class='btn btn-default pull-left green'> Go to channel page</button> </span><span> <button type='button' class='btn btn-default pull-left green'>Close </button> </span> </div>"> <?php echo $row1['1'] ?> </a>
为什么这么复杂？ 只是把这个：
data-html='true'
