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

你在做什么记住哪个弹出窗口当前有效？最好为每个id元素添加<div class="popover-markup">属性。

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

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

Answer 2

为此，你需要获得你点击的元素。

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

如果点击任何地方，我们希望弹出窗口消失。所以我们需要检查click事件是否在弹出窗口的任何位置。

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

@bootstrap，删除popover使用.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');
  }

});

Complex Bootstrap 2 Popovers单击以关闭

2 个答案: