ユーザーがクリックしたときにブートストラップポップオーバー（または一般的なアイテム）を閉じる方法は？

StackOverflow https://stackoverflow.com/questions/9302654

  •  25-10-2019
  •  | 
  •  

質問

TwitterのBootstrapライブラリのPopoverオブジェクトを手動モードで使用していますが、ユーザーがクリックしたときにツールチップを閉じる方法を考えていました。

これが私のHTMLです：

<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>

そして私のjavascript：

$('#stats-bar').click(function(e) {
        $(this).popover('show');
});

ユーザーがポップオーバー自体以外の場所をクリックすると、ポップオーバーを隠すにはどうすればよいですか？ポップオーバーの後ろに固定された透明なdivを使用して、クリックイベントを設定することを考えましたが、それが最良の方法であるかどうかはわかりません。

役に立ちましたか？

解決 2

これは、最も堅牢でシンプルなソリューションのように思えるので、ポップオーバーの背後に固定透過divを使用し、クリックイベントを設定することを選択しました。

他のヒント

ドキュメントクリックイベントに配線して、その時点でツールチップを非表示にしました

      $(document).click(function (e)
      {
          // check the parents to see if we are inside of a tool tip.  If the click came
          // from outside the tooltip, then hide our tooltip
          if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
      });

手動トリガーオプションを使用してクリックイベントに配線してツールチップを表示している場合は、ToopPropagation（）を呼び出して、ツールチップを表示するときにドキュメントクリックイベントが発射されるのを防ぐ必要があります。

体内をクリックする場所をトリガーする一般的なクリックイベントリスナーはどうですか？この投稿をご覧ください。達成しようとしているものに似ています。

https://stackoverflow.com/a/2125122/1013422

これを使用して、実際のポップオーバーを閉じます 

$('#stats-bar').popover('hide')

ポップアップイベントが実行されたときにのみ関数を定義し、ポップアップを閉じた後に削除するだけで、クリックイベントを常に聞いていません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top