复杂 Bootstrap 2 个弹出窗口单击以关闭

Question

我在一个页面上有多个独特的弹出窗口，需要在单击当前弹出窗口以外的任何地方时隐藏它们。弹出窗口比标准实现稍微复杂一些，所以我所知道的使它们隐藏的方法并不适用。

$('.popover-markup > .trigger').popover({
    html : true,
    title: function() {
      return $(this).parent().find('.head').html();
    },
    content: function() {
      return $(this).parent().find('.content').html();
    },
    container: 'body',
    placement: 'right'
});

Answer 1

您正在做什么来记住当前处于活动状态的弹出窗口？为每个 <div class="popover-markup"> 元素添加一个 id 属性是个好主意。

您应该将方法绑定到页面的 $('body') 元素，很可能 $('body').click(); 就是您所需要的。在该方法中创建一个新变量，例如 $lastClicked 它会记住上次单击（或活动）弹出的 id。

在此方法中使用 id 关闭弹出窗口。

Answer 2

为此，您需要获取点击的元素。

var objclass = $(event.target).attr('class');

我们希望弹出窗口在点击除本身以外的任何地方时消失。所以我们需要检查点击事件是否在弹出窗口的任何地方。

$(event.target).closest('.popover').length == 1

@bootstrap，删除弹出窗口使用 .popover('hide');

结果；

$(document).click(function(event) {
  var objclass = $(event.target).attr('class');
  if($(document).find('.popover').length > 0 && ($(event.target).closest('.popover').length == 1)){
      return false;
  }
  if ($(document).find('.popover').length > 0 && (objclass != 'trigger') && $(event.target).closest('.popover').length != 1) {
    $('.trigger').popover('hide');
  }

});

复杂 Bootstrap 2 个弹出窗口单击以关闭

Complex Bootstrap 2 Popovers Click to Dismiss

javascript

html

twitter-bootstrap

popover

复杂 Bootstrap 2 个弹出窗口 单击以关闭

Complex Bootstrap 2 Popovers Click to Dismiss

javascript

html

twitter-bootstrap

popover

复杂 Bootstrap 2 个弹出窗口单击以关闭