306

ブートストラップ ポップオーバー内に HTML を表示しようとしていますが、どういうわけか機能しません。ここでいくつかの答えを見つけましたが、うまくいきません。何か間違ったことをしている場合はお知らせください。

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>
4

13 に答える 13

368

<li href="#"に属しているため使用できません。そのため、<a href="#"機能していませんでした。変更してください。すべて問題ありません。

ここでは、ブートストラップ ポップオーバーを作成する方法を示す作業中の JSFiddleを示します。

コードの関連部分は次のとおりです。

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

ちなみに、少なくとも$("[data-toggle=popover]").popover();ポップオーバーを有効にする必要があります。ただし、代わりにordata-toggle="popover"を使用することもできます。そのような場合は、 eg: を使用してそれらを有効にすることを忘れないでください。id="my-popover"class="my-popover"$("#my-popover").popover();

完全な仕様へのリンクは次のとおりです: Bootstrap Popover

ボーナス：

data-content何らかの理由で、およびtitleタグからのポップアップのコンテンツが気に入らない、または読み取れない場合。また、隠し div やもう少し JavaScript を使用することもできます。これについての例を次に示します。

于 2012-11-02T22:27:18.017 に答える
298

属性を使用できますdata-html="true"：

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>
于 2013-05-02T10:34:54.970 に答える
117

再利用可能な方法でポップオーバー コンテンツを指定する別の方法は、次のように新しいデータ属性を作成し、次のようdata-popover-contentに使用することです。

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

これは、ポップオーバーに配置する html がたくさんある場合に便利です。

フィドルの例を次に示します: http://jsfiddle.net/z824fn6b/

于 2014-10-16T16:00:34.887 に答える
87

html オプションが有効になっているポップオーバー インスタンスを作成する必要があります (ポップオーバー JS コードの後に​​これを JavaScript ファイルに配置します)。

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

于 2012-11-02T21:59:55.223 に答える
24

リスト内でポップオーバーを使用しました。HTMLで例を示します

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
于 2014-02-17T13:26:25.877 に答える
11

data-html="true"リンクのポップオーバーを配置するだけです。うまくいきます。

于 2019-01-14T16:58:31.710 に答える
9

これは古い質問ですが、これは別の方法です。jQuery を使用してポップオーバーを再利用し、元のブートストラップ データ属性を使用してより意味のあるものにします。

リンク

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

表示するカスタム コンテンツ

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

完全な例をいじる: http://jsfiddle.net/tomsarduy/262w45L5/

于 2015-08-02T06:51:41.570 に答える
2

ファイル「ui-bootstrap-tpls-0.11.0.js」の「template/popover/popover.html」を変更できます書き込み：「ng-bind」の代わりに「bind-html-unsafe」

すべてのポップオーバーを html で表示します。* 安全でない html。html を信頼する場合にのみ使用してください。

于 2014-07-04T07:43:01.983 に答える