jquery - Bootstrapのポップオーバーに閉じるボタンを挿入する方法

Question

JS:

$(function(){
  $("#example").popover({
    placement: 'bottom',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span> <button type="button" id="close" class="close">&times;</button>',
    content : 'test'
  })
  $('html').click(function() {
    $('#close').popover('hide');
  });
});

HTML:

<button type="button" id="example" class="btn btn-primary" ></button>

私はあなたのコードがあなたのポップアップを表示しないと書いています。

誰もこの問題に遭遇しますか？

score 90 · Accepted Answer

マークアップを正しくする必要があります

<button type="button" id="example" class="btn btn-primary">example</button>

次に、1 つの方法は、要素自体の内部にクローズハンドラーをアタッチすることです。次のように動作します。

$(document).ready(function() {
    $("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span>'+
                '<button type="button" id="close" class="close" onclick="$(&quot;#example&quot;).popover(&quot;hide&quot;);">&times;</button>',
        content : 'test'
    });
});

score 33 · Accepted Answer

複数のポップオーバーと Bootstrap 3 で機能するものを見つける必要がありました。

これが私がしたことです：

ポップオーバーを機能させたい要素が複数あったため、ID を使用したくありませんでした。

マークアップは次のようになります。

<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>

ポップオーバー内の保存ボタンと閉じるボタンのコンテンツ:

var contentHtml = [
    '<div>',
        '<button class="btn btn-link cancel">Cancel</button>',
        '<button class="btn btn-primary save">Save</button>',
    '</div>'].join('\n');

3つのボタンすべてのjavascript：

このメソッドは、コンテナがデフォルトで本体に添付されていない場合に機能します。

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    trigger: 'manual'
}).on('shown.bs.popover', function () {
    var $popup = $(this);
    $(this).next('.popover').find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $(this).next('.popover').find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});

コンテナが「本体」に取り付けられている場合

次に、aria-describeby を使用してポップアップを見つけて非表示にします。

$('.foo').popover({
    title: 'Bar',
    html: true,
    content: contentHtml,
    container: 'body',
    trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
    var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
    $popup.find('button.cancel').click(function (e) {
        $popup.popover('hide');
    });
    $popup.find('button.save').click(function (e) {
        $popup.popover('hide');
    });
});

score 19 · Accepted Answer

前の例には 2 つの主な欠点があります。

「閉じる」ボタンは、何らかの方法で参照要素の ID を認識する必要があります。
「shown.bs.popover」イベントに、「クリック」リスナーを閉じるボタンに追加する必要があります。「ポップオーバー」が表示されるたびにそのようなリスナーを追加することになるため、これも良い解決策ではありません。

以下は、そのような欠点のないソリューションです。

デフォルトでは、'popover' 要素は DOM の referenced-element の直後に挿入されます (次に、referenced-element と popover が直接の兄弟要素であることに注意してください)。したがって、「閉じる」ボタンをクリックすると、最も近い「div.popover」親を探し、その親の直前の兄弟要素を探すことができます。

「閉じる」ボタンの「onclick」ハンドラに次のコードを追加するだけです。

$(this).closest('div.popover').popover('hide');

例：

var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').popover(\'hide\');" type="button" class="close" aria-hidden="true">&times;</button>';

$loginForm.popover({
    placement: 'auto left',
    trigger: 'manual',
    html: true,
    title: 'Alert' + genericCloseBtnHtml,
    content: 'invalid email and/or password'
});

score 15 · Accepted Answer

ここに画像の説明を入力

以下は、私のプロジェクトで使用したものです。お役に立てば幸いです

<a id="manualinputlabel" href="#" data-toggle="popover" title="weclome to use the sql quer" data-html=true  data-original-title="weclome to use the sql query" data-content="content">example</a>


$('#manualinputlabel').click(function(e) {
              $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
              $(this).popover();

          });

      $(document).click(function(e) {
         if(e.target.id=="popovercloseid" )
         {
              $('#manualinputlabel').popover('hide');                
         }

      });

score 10 · Accepted Answer

言及されたコード例の多くをチェックしましたが、Chris のアプローチは完璧に機能しています。ここにコードを追加して、動作するデモを作成しました。

Bootstrap 3.3.1 でテストしましたが、古いバージョンではテストしていません。しかし、このshown.bs.popoverイベントは 3.x で導入されたため、2.x では確実に機能しません。

$(function() {
  
  var createPopover = function (item, title) {
                       
        var $pop = $(item);
        
        $pop.popover({
            placement: 'right',
            title: ( title || '&nbsp;' ) + ' <a class="close" href="#">&times;</a>',
            trigger: 'click',
            html: true,
            content: function () {
                return $('#popup-content').html();
            }
        }).on('shown.bs.popover', function(e) {
            //console.log('shown triggered');
            // 'aria-describedby' is the id of the current popover
            var current_popover = '#' + $(e.target).attr('aria-describedby');
            var $cur_pop = $(current_popover);
          
            $cur_pop.find('.close').click(function(){
                //console.log('close triggered');
                $pop.popover('hide');
            });
          
            $cur_pop.find('.OK').click(function(){
                //console.log('OK triggered');
                $pop.popover('hide');
            });
        });

        return $pop;
    };

  // create popover
  createPopover('#showPopover', 'Demo popover!');

  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<button class="btn btn-primary edit" data-html="true" data-toggle="popover" id="showPopover">Show</button>

<div id="popup-content" class="hide">
    <p>Simple popover with a close button.</p>
    <button class="btn btn-primary OK">OK</button>
</div>

score 5 · Accepted Answer

トリックは、現在のポップオーバーを.data('bs.popover').tip()で取得することです:

$('#my_trigger').popover().on('shown.bs.popover', function() {
    // Define elements
    var current_trigger=$(this);
    var current_popover=current_trigger.data('bs.popover').tip();

    // Activate close button
    current_popover.find('button.close').click(function() {
        current_trigger.popover('hide');
    });
});

score 4 · Accepted Answer

私はこれに苦労していますが、これが最も簡単な方法です.3行のjsです:

ポップオーバーのタイトルにクロスを追加します
js スニペットを使用してポップオーバーを表示し、ヘッダーをクリックして閉じます
少しCSSを使って素敵にしましょう

$(document).ready(function() {
  // This is to overwrite the boostrap default and show it allways
  $('#myPopUp').popover('show');
  // This is to destroy the popover when you click the title
  $('.popover-title').click(function(){
    $('#myPopUp').popover('destroy');
  });
});

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";

/* Just to align my example */
.btn {
  margin: 90px auto;
  margin-left: 90px;
}

/* Styles for header */
.popover-title {
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-block;
  float: right;
  text-align: right; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<button id="myPopUp" class="btn btn-success" data-toggle="popover" data-placement="top" data-title="×" data-content="lorem ipsum content">My div or button or something with popover</button>

score 4 · Accepted Answer

答えを更新したかっただけです。Swashata Ghosh によると、以下は moi に対して機能するより簡単な方法です。

HTML:

<button type="button" class="btn btn-primary example">Example</button>

JS:

$('.example').popover({
   title: function() {
      return 'Popup title' +
             '<button class="close">&times</button>';
   },
   content: 'Popup content',
   trigger: 'hover',
   html: true
});

$('.popover button.close').click(function() {
   $(this).popover('toggle');
});

score 4 · Accepted Answer

これは複数のポップオーバーで機能し、オーバーラップするポップオーバーで発生する z-index の問題を処理するために、少し大きな追加の JS も追加しました。

http://jsfiddle.net/erik1337/fvE22/

JavaScript:

var $elements = $('.my-popover');
$elements.each(function () {
    var $element = $(this);

    $element.popover({
        html: true,
        placement: 'top',
        container: $('body'), // This is just so the btn-group doesn't get messed up... also makes sorting the z-index issue easier
        content: $('#content').html()
    });

    $element.on('shown.bs.popover', function (e) {
        var popover = $element.data('bs.popover');
        if (typeof popover !== "undefined") {
            var $tip = popover.tip();
            zindex = $tip.css('z-index');

            $tip.find('.close').bind('click', function () {
                popover.hide();
            });

            $tip.mouseover(function (e) {
                $tip.css('z-index', function () {
                    return zindex + 1;
                });
            })
                .mouseout(function () {
                $tip.css('z-index', function () {
                    return zindex;
                });
            });
        }
    });
});

HTML:

<div class="container-fluid">
    <div class="well popover-demo col-md-12">
        <div class="page-header">
             <h3 class="page-title">Bootstrap 3.1.1 Popovers with a close button</h3>

        </div>
        <div class="btn-group">
            <button type="button" data-title="Popover One" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Two" class="btn btn-primary my-popover">Click me!</button>
            <button type="button" data-title="Popover Three (and the last one gets a really long title!)" class="btn btn-primary my-popover">Click me!</button>
        </div>
    </div>
</div>
<div id="content" class="hidden">
    <button type="button" class="close">&times;</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

CSS:

/* Make the well behave for the demo */
 .popover-demo {
    margin-top: 5em
}
/* Popover styles */
 .popover .close {
    position:absolute;
    top: 8px;
    right: 10px;
}
.popover-title {
    padding-right: 30px;
}

score 3 · Accepted Answer

これを試して：

$(function(){
  $("#example")
      .popover({
      title : 'tile',
      content : 'test'
    })
    .on('shown', function(e){
      var popover =  $(this).data('popover'),
        $tip = popover.tip();

      var close = $('<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
        .click(function(){
          popover.hide();
        });
      $('.popover-title', $tip).append(close);
    });
});

ボタンをマークアップの文字列として追加するよりも、jQuery でラップされたボタンを使用すると、はるかに簡単にバインドできます。これは確かに残念ながら Bootstrap コードにはありませんが、この回避策は私にとってはうまくいき、必要に応じてすべてのポップオーバーに適用するように実際に拡張できます。

score 1 · Accepted Answer

$popover = $el.popover({
  html: true
  placement: 'left'
  content: 'Do you want to a <b>review</b>? <a href="#" onclick="">Yes</a> <a href="#">No</a>'
  trigger: 'manual'
  container: $container // to contain the popup code
});

$popover.on('shown', function() {
  $container.find('.popover-content a').click( function() {
    $popover.popover('destroy')
  });
});

$popover.popover('show')'

score 1 · Accepted Answer

FWIW、これが私が使用している一般的なソリューションです。私は Bootstrap 3 を使用していますが、一般的なアプローチは Bootstrap 2 でも機能するはずです。

このソリューションは、ポップオーバーを有効にし、JS コードの汎用ブロックを使用して「rel="popover"」タグで識別されるすべてのポップオーバーに「閉じる」ボタンを追加します。rel="popover" タグがあるという (標準の) 要件を除けば、任意の数のポップオーバーをページに配置でき、ID を知る必要はありません。実際、ID は必要ありません。まったく。ポップオーバーのタイトル属性を設定するには、「data-title」HTML タグ形式を使用し、data-html を「true」に設定する必要があります。

私が必要だと思ったトリックは、ポップオーバーオブジェクト ("po_map") への参照のインデックス付きマップを作成することでした。次に、JQuery が提供するインデックス ("p_list['+index+'].popover(\'toggle\')") を介して popover オブジェクトを参照する HTML を介して 'onclick' ハンドラーを追加できます。そうすれば、ポップオーバーオブジェクトの ID について心配する必要はありません。JQuery が提供する一意のインデックスを使用して、オブジェクト自体への参照のマップを持っているからです。

これがJavaScriptです：

var po_map = new Object();
function enablePopovers() {
  $("[rel='popover']").each(function(index) {
    var po=$(this);
    po_map[index]=po;
    po.attr("data-title",po.attr("data-title")+
    '<button id="popovercloseid" title="close" type="button" class="close" onclick="po_map['+index+'].popover(\'toggle\')">&times;</button>');
    po.popover({});
  });
}
$(document).ready(function() { enablePopovers() });

このソリューションにより、サイト全体のすべてのポップオーバーに閉じるボタンを簡単に配置できました。

score 1 · Accepted Answer

    $('.tree span').each(function () {
        var $popOverThis = $(this);
        $popOverThis.popover({
            trigger: 'click',
            container: 'body',
            placement: 'right',
            title: $popOverThis.html() + '<button type="button" id="close" class="close" ">&times;</button>',
            html: true,
            content: $popOverThis.parent().children("div.chmurka").eq(0).html()
        }).on('shown.bs.popover', function (e) {
            var $element = $(this);
            $("#close").click(function () {
                $element.trigger("click");
            });
        });
    });

要素をクリックしてポップアップを表示すると、次にイベント shown.bs.popover を発生させることができます。ここで、トリガーをクリックしてポップオーバーを閉じる要素を取得します。

score 0 · Accepted Answer

これをタイトルポップオーバーコンストラクターに入れます...

'<button class="btn btn-danger btn-xs pull-right"
onclick="$(this).parent().parent().parent().hide()"><span class="glyphicon
glyphicon-remove"></span></button>some text'

...右上隅に小さな赤い「x」ボタンを表示するには

//$('[data-toggle=popover]').popover({title:that string here})

score 0 · Accepted Answer

これは、上記の @Chris の回答に基づいた実用的なソリューションですが、トリガー要素の後続のクリック時に要素を 2 回クリックする必要がないように修正されています。

コメントに記載されているように、手動で使用.popover('hide)すると、ブートストラップの内部状態が台無しになります。

var closePopover = function(eventShown) {
   // Set the reference to the calling element
   var $caller = $('#' + this.id);

   // Set the reference to the popover
   var $popover = $('#' + $(eventShown.target).attr('aria-describedby'));

       // Unbind any pre-existing event handlers to prevent duplicate clicks
       $popover.find('.popover-close').off('click');

       // Bind event handler to close button
       $popover.find('.popover-close').on('click', function(e) {

          // Trigger a click on the calling element, to maintain bootstrap's internal state
          $caller.trigger('click');
        });
 }

$('.popoverTriggerElement').popover({
   trigger: 'click'
})
.on('shown.bs.popover', closePopover)

これで、クリックイベントを複製せずに閉じるボタンを使用し、ブートストラップの内部状態をチェックして期待どおりに動作させることができます。

score -3 · Accepted Answer

<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.popover-1.1.2.js"></script>

<script type="text/javascript">
$(function(){ 
$("#example").popover({
        placement: 'bottom',
        html: 'true',
        title : '<span class="text-info"><strong>title</strong></span> <button     type="button" id="close" class="close">&times;</button></span>',
        content : 'test'
    })


$("#close").click(function(event) {

$("#example").popover('hide');
});
});
</script>

<button type="button" id="example" class="btn btn-primary" >click</button>

jquery - Bootstrapのポップオーバーに閉じるボタンを挿入する方法

26 に答える 26

Related

Reference