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


151

我使用Twitter的引导的酥料饼这里。现在,当我滚动查看弹出框文本时,会出现一个弹出框,其中仅包含来自<a>data-content属性的文本。我想知道是否有任何地方可以放置<div>弹出窗口。潜在地,我想在那里使用php和mysql,但是如果我可以使div正常工作,我想我可以弄清楚其余部分。我尝试将数据内容设置为divID,但没有成功。

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

Answers:


305

首先,如果要在内容内使用HTML,则需要将HTML选项设置为true:

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

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

  • 使用数据内容属性。这是默认选项。
  • 使用自定义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>

希望能帮助到你!

PS:使用弹出框而不设置title属性时遇到了一些麻烦...因此,请记住始终设置标题。


5
仅供参考,引导程序具有一个名为“隐藏”的类,该类设置显示:无
Domenic 2013年

1
请注意,但是对于IE7而言,这种方法的速度实在是太慢了,大概是因为html的副本涉及许多DOM操作。根据我们的经验,它在IE7中不可用,因此您需要以其他方式加以限制。
2014年

如果您发现您需要将javascript函数附加到您的内部链接上popover_content_wrapper,则此解决方案将引起问题,因为它已呈现为html(没有处理程序)。然后,解决方案是侦听“ inserted.bs.popover”事件,并将您的处理程序重新附加到DOM中的新元素。
Ryan Shillington

42

在jävi的答案的基础上,无需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();
    }
});

11

如果您只希望弹出外观,则可以使用另一种替代方法。以下是方法。当然,这是手动操作,但是很好用:)

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-弹出框

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

JS

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

这对我有用,尽管我不得不硬装弹出窗口的位置,这不太好,例如style="top: 200px; left: 90px;用于bgformdiv。有没有办法调用引导程序的自动放置代码?另外,您可以使用fadeToggle()或仅将toggle()用于javascript中的不同效果。
赛车Ta

这是唯一正确的方法。html()创建一个副本,使其无法用于数据绑定。也没有任何事件可以挂接到过渡前状态,因此您无法绑定到弹出窗口,直到它可见为止。
Daryl Teo 2015年

11

晚会。建立其他解决方案。我需要一种将目标DIV作为变量传递的方法。这是我所做的。

用于Popover源的HTML(添加了一个数据属性data-pop,它将保留目标DIV ID /或类的值):

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

用于Popover内容的HTML(我正在使用引导隐藏类):

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

你可以加一个小提琴吗?开箱即用,这是行不通的。
RedSands

8

除了其他回复。如果允许html使用选项,则可以将jQuery对象传递给内容,并将其与所有事件和绑定一起添加到popover的内容中。这是源代码中的逻辑:

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

5

所有这些答案都错过了一个非常重要的方面!

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

  1. 您不能使用任何ID,因为这些ID将重复。
  2. 如果每次显示弹出框时都加载内容,则将丢失所有用户输入。

您要做的是将对象本身加载到弹出窗口中。

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


});

1
如果我能对此投票100次,我会。我一直追着我的尾巴,试图弄清楚为什么在弹出窗口中调用$('#'+ id).val()总是返回空白字符串。这是因为织补html复制了div。
Ntellect13 '18


-2
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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.