LoginSignup
40
37

More than 5 years have passed since last update.

ポップオーバーの外側クリックで閉じるようにするには

Last updated at Posted at 2012-09-16

bootstrap標準のポップオーバーはボタンのクリックで表示/非表示が切り替わるようになっていますが、
iPadのポップオーバーみたいに外側をクリックすると閉じてくれた方が親切な気がします。

その場合、以下のようにtriggerをmanualにして、クリックイベントでポップオーバーのshow/hideを切り替えます。

<a href="#" class="btn" id="show-popup">ポップアップ表示</a>
$("#show-popup").popover({
  placement: 'right',
  title: 'title',
  content: 'hogehoge',
  trigger: 'manual'
});

$('#show-popup').click(function(evt) {
  evt.stopPropagation();
  $(this).popover('show');
});

$('.popover').live('click', function(evt) {
  evt.stopPropagation();
});

$('html').live('click', function() {
  $('#show-popup').popover('hide');
});

html全体に対してクリックでhideさせるようにしておき、ポップオーバーの中だったらstopPropagationでそれを無効化する、というやり方です。
注意点として、ポップオーバーはボタンクリックされるまでは存在しないので、bindではなくliveにする必要があります。
また、liveよりもbindで設定したハンドラの方が優先して実行されるため、htmlに対してのハンドラもliveにする必要があります。

40
37
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
37