首页 文章

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

提问于
浏览 次
146

我正在使用twitter 's bootstrap' s popover here . 现在，当我滚动弹出文本时，弹出窗口只显示 <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>
twitter-bootstrap popover

8 回答

  • 42

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

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

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

    • 使用data-content属性 . 这是默认选项 .

    • 使用返回HTML内容的自定义JS函数 .

    Using data-content ：您需要转义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 * .

    Using a JS function ：如果这样做，您有几个选择 . 我认为最简单的方法是将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：我在使用popover而没有设置title属性时遇到了一些麻烦...所以，记得要始终设置 Headers .

    回复于
  • 11

    基于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();
    }
});
    回复于
  • 8

    另一种替代方法，如果你想拥有弹出的外观和感觉 . 以下是方法 . 当然这是一个手动的东西，但很好用:)

    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();
});
    回复于
  • 2

    迟到了 . Build 其他解决方案 . 我需要一种方法将目标DIV传递为 variable . 这就是我做的 .

    用于Popover源的HTML（添加了一个数据属性 data-pop ，它将保存目标DIV id /或类的值）：

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

    用于Popover内容的HTML（我正在使用bootstrap hide class）：

    <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();
}});
    回复于
  • 10

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

    • 如果你传递一个函数，它将被调用来解包内容数据

    • 如果不允许 html ，则内容数据将作为文本应用

    • 如果 html 允许且内容数据为字符串，则将其应用为 html

    • 否则内容数据将附加到popover的内容容器中

    $("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});
    回复于
  • 295

    All of these answers miss a very important aspect!

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

    • 您不能使用任何ID，因为ID将被复制 .

    • 如果每次显示弹出窗口时加载内容，您将丢失所有用户的输入 .

    你想要做的是将对象本身加载到弹出框中 .

    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
    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>
    回复于
  • -1

    为什么这么复杂？就这样说：

    data-html='true'
    回复于

相关问题