Twitterのポップオーバーのコンテンツとしてdivを使用することは可能ですか


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>

回答:


305

まず、コンテンツ内でHTMLを使用する場合は、HTMLオプションをtrueに設定する必要があります。

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

次に、ポップオーバーのコンテンツを設定する2つのオプションがあります

  • data-content属性を使用します。これがデフォルトのオプションです。
  • HTMLコンテンツを返すカスタムJS関数を使用します。

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 *を使用します。

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:popoverを使用していて、title属性を設定していないときに問題が発生したので、常にタイトルを設定してください。


5
参考までに、ブートストラップには表示を設定する「非表示」と呼ばれるクラスがあります:none
Domenic

1
ただのメモですが、このアプローチはIE7にとって恐ろしく遅くなります。おそらく、htmlのコピーには多くのDOM操作が含まれるためです。私たちの経験では、IE7では使用できないため、別の方法で固める必要があります。
philw

内にあるリンクにアタッチされたjavascript関数が必要であることがわかった場合popover_content_wrapper、このソリューションは(ハンドラーなしで)htmlにレンダリングされるため問題を引き起こします。次に、「inserted.bs.popover」イベントをリッスンし、ハンドラーを現在DOMにある新しい要素に再アタッチします。
ライアン

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 を使用するなど、ポップオーバーの場所を配線する必要がありました。代わりにブートストラップの自動配置コードを呼び出す方法はありますか?また、JavaScriptのさまざまな効果に対して、fadeToggle()または単にtoggle()を使用できます。
レーシングオタマジャクシ

これが唯一の正しい方法です。html()はコピーを作成し、データバインディングの目的では機能しなくなります。また、遷移前の状態にフックするイベントがないため、表示されるまでポップオーバーにバインドできません。
ダリル・テオ2015年

11

パーティーに遅れました。他のソリューションを構築する。ターゲットDIVを変数として渡す方法が必要でした。これが私がしたことです。

ポップオーバーソースのHTML(宛先DIV IDまたはクラスの値を保持するデータ属性data-popを追加):

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

ポップオーバーコンテンツの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 2016年

8

他の返信に加えて。htmlオプションで許可すると、jQueryオブジェクトをコンテンツに渡すことができ、すべてのイベントとバインディングとともにポップオーバーのコンテンツに追加されます。ソースコードのロジックは次のとおりです。

  • 関数を渡すと、コンテンツデータのラップを解除するために呼び出されます
  • もし html許可されていないコンテンツデータはテキストとして適用されます
  • 場合はhtml許可されたコンテンツデータは、として適用される文字列です。html
  • そうでない場合、コンテンツデータはポップオーバーのコンテンツコンテナーに追加されます
$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});

5

これらの回答はすべて、非常に重要な側面を欠いています!

.html、innerHtml、またはouterHtmlを使用することで、参照される要素を実際に使用することはありません。要素の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()を呼び出すと空白の文字列が返される理由を理解しようとして、私は尻尾をずっと追いかけました。これは、divのコピーを作成するhtmlが原因です。
Ntellect13 2018

-1

なぜそんなに複雑なのですか?これを入れてください:

data-html='true'

フィドルコードまたは完全なコードを説明して追加してください。これはそのままでは役に立ちません。
RedSands 2016年

-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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.