外部をクリックしてTwitterブートストラップポップオーバーを閉じる方法は?


289

モーダルと同じように、ポップオーバーを非表示にできますか?ユーザーがそれらの外のどこかをクリックしたときにそれらを閉じますか?

残念ながら、ポップオーバーの代わりに実際のモーダルを使用することはできません。これは、モーダルがposition:fixedを意味し、もはやポップオーバーではなくなるためです。:(



このstackoverflow.com/a/40661543/5823517をお試しください。親のループ処理は含まれません
Tunn

data-trigger="hover"そしてdata-trigger="focus"、内蔵されている代替ポップオーバーを閉じるために、あなたがトグルを使用しない場合。私の意見でdata-trigger="hover"は、最高のユーザーエクスペリエンスを提供します...追加の.jsコードを記述する必要はありません...
Hooman Bahreini

回答:


461

更新:もう少し堅牢なソリューション:http : //jsfiddle.net/mattdlockyer/C5GBU/72/

テキストのみを含むボタンの場合:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

アイコンを含むボタンの使用(このコードにはBootstrap 3.3.6のバグがあります。この回答の以下の修正を参照してください)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

JSはPopovers生成のために使用する'[data-original-title]'の代わりに、'[data-toggle="popover"]'

警告:上記のソリューションでは、複数のポップオーバーを一度に開くことができます。

一度に1つのポップオーバーを実行してください。

更新: Bootstrap 3.0.x、コードまたはフィドルを参照http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

これは、すでに開いていてクリックされていない、またはリンクがクリックされていないポップオーバーのクローズを処理します。


更新: Bootstrap 3.3.6、フィドルを参照

閉じた後、2回のクリックで再び開く問題を修正

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

更新:以前の改善の条件を使用して、このソリューションは達成されました。ダブルクリックとゴーストポップオーバーの問題を修正します。

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

2
がページ全体に拡張されない場合$(document)がある$('body')ので、ではなくにアタッチしbodyます。
jasop 2013

6
ポップオーバー(およびその後の非表示アクション)をアクティブ化した後、ポップオーバーは完全には非表示になりません。見えないだけです。問題は、非表示の現在存在するポップオーバーの下のコンテンツをクリックしたり、ホバーしたりできないことです。最新のChromeビルド、最新のブートストラップ3 .jsで問題が発生します(他のブラウザーでも可能であり、この回避策が必要なので、確認する必要がありませんでした)
ravb79

6
'[data-toggle="popover"]'JavaScriptで生成されたポップオーバーでは機能しないの代わりに、'[data-original-title]'セレクターとして使用しました。
Nathan

4
このソリューションが最新バージョンのブートストラップで機能しない理由を誰かが知っていますか?次のようになります。ボタンをクリックしてポップオーバーを表示し、本文をクリックしてポップオーバーを閉じ、ボタンをクリックしてポップオーバーを表示し、ポップオーバーは表示されません。一度クリックすると、もう一度クリックすると失敗します。とても奇妙です。
JTunney、2015年

3
@JTunney私はBS 3.3.6を実行していますが、popoeverを1つ閉じた後に2回のクリックでpopoeverを開く必要があるという動作が見られます。
sersun

65
$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

これにより、ポップオーバー以外の場所をクリックすると、すべてのポップオーバーが閉じます。

Bootstrap 4.1のアップデート

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

ポップオーバー(pop-btn)をトリガーするボタンにクラスを追加したので、含まれていません... if(!$(e.target).closest( '。popover')。length &&!$(e。 target).closest( '。btn')。hasClass( 'pop-btn'))
mozgras

2
3つのポップオーバーボタンがあるため、このコードは問題を引き起こします。場合によってはボタンをクリックできず、ボタンが点滅します。
OpenCode

1
このコードを機能させることができません...このフィドルを確認して、答えにフィドルを追加してください。jsfiddle.net/C5GBU/102
mattdlockyer

私にぴったりです。私の「外部クリック」がたまたま新しいポップオーバーを開いたとき、他の回答には副作用がありました。
Facio比2016

これはうまく機能しますが、ポップオーバーのコンテンツをクリックしても閉じないように、これを適応させる方法が必要です。たとえば、ポップオーバー内の<b>タグ内のテキストをクリックした場合...
カリフォルニア州ベン

40

最もシンプルで最も安全なバージョンで、どのブートストラップバージョンでも機能します。

デモ:http : //jsfiddle.net/guya/24mmM/

デモ2:ポップオーバーコンテンツ内をクリックしても閉じない http://jsfiddle.net/guya/fjZja/

デモ3:複数のポップオーバー:http ://jsfiddle.net/guya/6YCjW/


この行を呼び出すだけで、すべてのポップオーバーが終了します。

$('[data-original-title]').popover('hide');

このコードで外側をクリックすると、すべてのポップオーバーを閉じます:

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined') {
    $('[data-original-title]').popover('hide');
  }
});

上記のスニペットは、本文にクリックイベントを添付しています。ユーザーがポップオーバーをクリックすると、通常どおりに動作します。ユーザーがポップオーバーではない何かをクリックすると、すべてのポップオーバーが閉じます。

他のいくつかの例では機能しないのとは対照的に、Javascriptで開始されるポップオーバーでも機能します。(デモを参照)

ポップオーバーコンテンツの内側をクリックしたときに閉じたくない場合は、次のコードを使用します(2番目のデモへのリンクを参照)。

$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

3
同様の問題を持っていたし、これはブートストラップ3で働いていた
wsams

ポップオーバーが重なるようにポップオーバーを近づけると、外側のどこかをクリックしてポップオーバーを非表示にすると、リンクの1つが機能しなくなります。チェック:jsfiddle.net/qjcuyksb/1
Sandeep Giri

1
ポップオーバーでbootstrap-datepickerを使用すると、前のバージョンは機能しません。
dbinott 2015年

1
受け入れられた回答が30ほどのポップアップを持つリソースの独り占めになり始めたため、私はこのソリューションが最も好きでした
David G

1
おそらくは!$(e.target).closest('.popover.in').lengthより効率的です!$(e.target).parents().is('.popover.in')
joeytwiddle 2016

19

ブートストラップ2.3.2を使用すると、トリガーを「フォーカス」に設定できます。

$('#el').popover({trigger:'focus'});

1
+1、ただし重要な注意事項:ボタンまたはアンカーをもう一度クリックしても、受け入れられた回答が閉じても、ポップオーバーは閉じません。
クリスチャンゴルハート

18

これは基本的にそれほど複雑ではありませんが、グリッチを回避するために行うチェックがいくつかあります。

デモ(jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

2
これは、モーダルを外部以外のどこでもクリックすることで
閉じます

popover()ホバーではなくクリックでこれを行うことは可能ですか?
Zaki Aziz

3
もちろん、あなたが呼び出す必要はstopPropagation()(ない場合は、クリックハンドラーに渡されるイベントに隠れハンドラがすぐにポップオーバーを非表示します)。デモ(jsfiddle)
シャーブロウ2013年

同じ機能を以下のコードで実現しています。この答えは膨らんでおり、質問には少しばかげています...彼が望んでいるのは、あなたが外側をクリックしたときにポップオーバーを閉じることだけです...これはやりすぎで醜いです!
mattdlockyer 2013

2
訂正、私ははるかに少ないコードでより良い機能を持っていると思います。一度に1つのポップアップのみを表示することを想定しています。これが気に入ったら、以下の私の答えに賛成投票してください:jsfiddle.net/P3qRK/1答え:stackoverflow.com/a/14857326/1060487
mattdlockyer

16

想定投票数の多いソリューションがどれも私にとって正しく機能しませんでした。(他の要素をクリックして)ポップオーバーを最初に開いて閉じた後、トリガーリンクを1回ではなく2回クリックするまで、ポップオーバーは再び開きません。

だから私はそれを少し修正しました:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

1
いいですね、うまくいきました。ところであなたはを忘れました); 最後のコードの終わりに}
Merlin

1
2回目のクリックに関連する同じ問題がありました。これはフェイルセーフの答えになるはずです!
FelipeLeão16年

上記の以前の解決策も試しましたが、2016年の時点でも解決策を探している人へのガイダンスとして、これはより良い解決策です。
dariru 2016年

トップの回答、宣伝どおりに機能します。述べたように、他の人はしませんでした。これが一番の答えになるはずです
duggi

data-toggel = "popover"を使用しなかった以外は、完全に機能します。ただし、ポップオーバートリガー要素に一致する任意のセレクターを指定できます。素晴らしい解決策であり、2つのクリックの問題を解決した唯一の解決策です。
shock_gone_wild 2018

11

私はそれを行う方法を示すためにjsfiddleを作成しました:

http://jsfiddle.net/3yHTH/

アイデアは、ボタンをクリックするとポップオーバーを表示し、ボタンの外側をクリックするとポップオーバーを非表示にすることです。

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

素晴らしいデモ。Jqueryオブジェクトでpopoverを呼び出す方法を知りたいのですが、popoverはブートストラップjsプラグインですが、そこにブートストラップjsファイルを含めていませんか?
bingjie2680 2012

jsfiddleにjsファイルがあります。左側の列->リソースの管理をご覧ください。
ピゲイラス2012

わかりました、ブートストラップjsがあります。それはチェックされていません、それはまだ動作しますか?
bingjie2680 2012

はい、動作します。とにかく、グーグルで検索したところjsfiddle bootstrap、jsfiddleのブートストラップcss + jsのスケルトンがわかりました。
ピゲイラス2012

2
これに関する私の唯一の問題は、クリックしたときにポップオーバーを非表示にすることです。ツールチップを使用することもできます。
NoBrainer 2013

7

要素にこの属性を追加するだけです

data-trigger="focus"

当初、Bootstrap 3.3.7ではこれは機能しませんでしたが、ドキュメントを読んだところ、ここで言及する価値のあるガイダンスがいくつかあります。ドキュメントのDismissible popoverの例から、「適切なクロスブラウザおよびクロスプラットフォームの動作には、<button>タグではなく<a>タグを使用する必要があります。また、role = "button"およびtabindex属性を含める必要があります。 」
ジェフ

3

これは、以前ここで尋ねられました。私が与えた同じ答えはその後も当てはまります:

私も同様のニーズがあり、Lee CarmichaelによるTwitter Bootstrap Popoverのこの小さな拡張機能、BootstrapX-clickoverを見つけました。また、ここにはいくつかの使用例があります。基本的に、それはポップオーバーをインタラクティブなコンポーネントに変更し、ページの他の場所、またはポップオーバー内の閉じるボタンをクリックすると閉じるようになります。これにより、一度に複数のポップオーバーを開くことができ、他の多くの便利な機能も利用できます。


3

これはパーティーには遅れますが...共有したいと思いました。私はポップオーバーが大好きですが、組み込み機能がほとんどありません。私はポップオーバーになりたいすべてのものであるブートストラップ拡張.bubble()を書きました。却下する4つの方法。外をクリックし、リンクを切り替え、Xをクリックして、エスケープを押します。

自動的に配置されるため、ページから外れることはありません。

https://github.com/Itumac/bootstrap-bubble

これは不当な自己宣伝ではありません...私は自分の人生で他の人のコードを何度も手にしたので、自分の努力を提供したかったのです。試してみて、うまくいくかどうかを確認してください。


3

http://getbootstrap.com/javascript/#popoversによると、

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

フォーカストリガーを使用して、ユーザーが次にクリックしたときにポップオーバーを閉じます。

$('.popover-dismiss').popover({
    trigger: 'focus'
})

2
OS Xのネイティブ動作に従うMacブラウザーでは機能しません(クリック時にボタンをフォーカスしたりぼかしたりしません)。これらには、FirefoxとSafariが含まれます。ブートストラップの人たちはここで大きな間違いを犯しました。これらのポップオーバーは開くことさえできず、却下されただけではありません。
アンテヴリ14

2
@AnteVrliあなたのコメントを書いたとき多分これは、マニュアルではまだありませんでしたが、今のドキュメントは言う:適切なクロスブラウザ、クロスプラットフォームの動作については、あなたが使用しなければならない」<a>タグ、ない<button>タグを、そしてあなたも含める必要がありますrole="button"し、tabindex属性。」これらの仕様で試してみましたか?
Louis

3
まあ、この回答に問題があります。これはプラットフォームの互換性とは何の関係もありません。ポップオーバーをトリガーする要素がフォーカスを失うため、ポップオーバー内でマウスボタンを押すとポップオーバーが閉じます。ユーザーがポップオーバーからコピーアンドペーストできるようにすることを忘れてください。マウスボタンが押されるとすぐに、ポップオーバーが閉じます。ポップオーバーにアクション可能なアイテム(ボタン、リンク)がある場合、ユーザーはそれらを使用できません。
Louis

ブートストラップ4.0.0-betaと4.0.0-beta.2では、これをChromeのMacで動作させることができないため、「クロスプラットフォーム」の場合はこれで十分です:(
rmcsharry

3

承認されたソリューションを変更しました。私が経験したことは、いくつかのポップオーバーが非表示になった後、再度表示するには2回クリックする必要があるということです。これは、popover( 'hide')が既に非表示のポップオーバーで呼び出されていないことを確認するために行ったものです。

$('body').on('click', function (e) {
    $('[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});


3

このソリューションは正常に動作します:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});

2
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });

2

イベントバブリングを使用して、DOMからポップアップを削除することもできます。少し汚れていますが、問題なく動作します。

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

HTMLで、ポップオーバーを閉じるポップオーバー内のコンテンツに.popover-closeクラスを追加します。


2

セレクター委譲を使用してポップオーバーを作成する場合、 'hide'メソッドは機能しないようです。代わりに、 'destroy'を使用する必要があります。

私はそれをそのように機能させました:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

ここJSJSiddle


2

@mattdlockyerからのソリューションに問題があることがわかりました(ソリューションに感謝します!)。このようなポップオーバーコンストラクターのセレクタープロパティを使用すると...

$(document.body').popover({selector: '[data-toggle=popover]'});

...提案されているBS3のソリューションは機能しません。代わりに、そのローカルの2番目のポップオーバーインスタンスを作成します$(this)。これを防ぐためのソリューションを次に示します。

$(document.body).on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
            if (bsPopover) bsPopover.hide();
        }
    });
});

前述の$(this).popover('hide');ように、委任されたリスナーにより、2番目のインスタンスが作成されます。提供されるソリューションは、すでにインスタンス化されているポップオーバーのみを非表示にします。

私はあなたたちをしばらくの間救うことができれば幸いです。


2

ブートストラップはこれをネイティブにサポートします

JS Binデモ

次のクリックで閉じるために必要な特定のマークアップ

適切なクロスブラウザ、クロスプラットフォームの動作については、あなたが使用する必要があり<a>、タグ、ない<button>タグを、あなたも含める必要がありますrole="button"し、tabindex属性を。


ブートストラップ4.0.0-betaおよび4.0.0-beta.2では、ChromeのMacでこれを機能させることができません:(
rmcsharry

どこかをクリックすると、このポップオーバーが閉じます。質問者は、「ポップオーバーの外側をクリックすると閉じます」と要求しますが、これは異なります。
2018年

2

このソリューションは、ポップオーバーを2回目に表示するときに厄介な2回目のクリックを取り除きます

Bootstrap v3.3.7でテスト済み

$('body').on('click', function (e) {
    $('.popover').each(function () {
        var popover = $(this).data('bs.popover');
        if (!popover.$element.is(e.target)) {
            popover.inState.click = false;
            popover.hide();                
        }
    });
});

2

私は以前の答えの多くを試しましたが、実際には何もうまくいきませんが、この解決策はうまくいきました:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

彼らはボタンではなくアンカータグを使用することをお勧めし、role = "button" + data-trigger = "focus" + tabindex = "0"属性を処理します。

例:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

あまりにもこの参照を試してみてください。stackoverflow.com/questions/20466903/...
アフメド・エルDamasy

1

私はこれを思いつきました:私のシナリオでは、同じページにさらに多くのポップオーバーが含まれており、それらを非表示にしただけで非表示になり、そのため、ポップオーバーの背後にあるアイテムをクリックできませんでした。アイデアは、特定のポップオーバーリンクを「アクティブ」としてマークし、アクティブポップオーバーを「トグル」するだけです。そうすると、ポップオーバーが完全に閉じます$( '。popover-link')。popover({html:true、container: 'body'})

$('.popover-link').popover().on 'shown.bs.popover', ->
  $(this).addClass('toggled')

$('.popover-link').popover().on 'hidden.bs.popover', ->
  $(this).removeClass('toggled')

$("body").on "click", (e) ->
  $openedPopoverLink = $(".popover-link.toggled")
  if $openedPopoverLink.has(e.target).length == 0
    $openedPopoverLink.popover "toggle"
    $openedPopoverLink.removeClass "toggled"

1

新しいポップオーバーが表示される前に、他のアクティブなポップオーバーを削除するだけです(ブートストラップ3)。

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

1

3.3.6でテストし、2回目のクリックで問題ありません

        $('[data-toggle="popover"]').popover()
            .click(function () {
            $(this).popover('toggle');
        });;

        $(document).on('click', function (e) {
            $('[data-toggle="popover"]').each(function () {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

0

デモ:http : //jsfiddle.net/nessajtr/yxpM5/1/

var clickOver = clickOver || {};
clickOver.uniqueId = $.now();

clickOver.ClickOver = function (selector, options) {
    var self = this;

    //default values
    var isVisible, clickedAway = false;

    var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();

options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;

self.onClose = function () {
    $("#" + divId).html(options.loadingContent());
    $(selector).popover('hide')
    isVisible = clickedAway = false;
};
self.onCallback = function (result) {
    $("#" + divId).html(result);
};

$(selector).popover(options);

//events
$(selector).bind("click", function (e) {
    $(selector).filter(function (f) {
        return $(selector)[f] != e.target;
    }).popover('hide');

    $(selector).popover("show");
    callbackMethod(self.onCallback);

    isVisible = !(clickedAway = false);
});

$(document).bind("click", function (e) {
    if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
        self.onClose();
        isVisible = clickedAway = false;
    } else clickedAway = true;
});

}

これが私の解決策です。


0

このアプローチにより、ページ上の任意の場所をクリックして、ポップオーバーを閉じることができます。別のクリック可能なエンティティをクリックすると、他のすべてのポップオーバーが非表示になります。animation:falseが必要です。それ以外の場合、コンソールでjquery .removeエラーが発生します。

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

0

OK、これは実際にスタックオーバーフローで何かに答えようとする私の最初の試みなので、ここでは何もしません:P

この機能が実際に最新のブートストラップでそのまま動作するかどうかは明確ではないようです(どこかで妥協するつもりならユーザーがクリックできる。 'クリックする必要があるかどうかはホバーはそれ自体ですが、iPadではクリックがトグルとして機能します。

最終的には、デスクトップ上でホバーまたはクリックできます(ほとんどのユーザーがホバーします)。タッチデバイスでは、要素に触れると要素が表示され、もう一度触れると要素が削除されます。もちろん、これは元の要件からわずかに妥協したものですが、少なくともコードはきれいになりました:)

$( "。my-popover")。popover({trigger: 'click hover'});


0

Matt Lockyerのコードを使用して、DOMが非表示の要素で覆われないように、簡単なリセットを行いました。

マットのコード:http : //mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

フィドル:http : //jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

0

これを試してください、これは外側をクリックすると非表示になります。

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
    $(this).popover('hide');
    }
    });
});

0

次のようなコードを使用して動的にポップオーバーリンクを設定していたため、mattdlockyerのソリューションに問題がありました。

$('body').popover({
        selector : '[rel="popover"]'
});

だから私はそれをそのように修正しなければなりませんでした。それは私のために多くの問題を修正しました:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

destroyは要素を取り除くので、セレクター部分はポップオーバーの初期化で重要です。

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