复杂的 Bootstrap 2 弹出框点击关闭答案

【问题标题】：Complex Bootstrap 2 Popovers Click to Dismiss复杂的 Bootstrap 2 弹出框点击关闭
【发布时间】：2016-06-14 18:08:57
【问题描述】：

我在一个页面上有多个独特的弹出框，需要在单击除弹出框当前处于活动状态之外的任何位置时隐藏它们。弹出框比标准实现稍微复杂一点，所以我所知道的让它们隐藏的方法并不适用。

http://jsfiddle.net/bb37385m/

$('.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'
});

【问题讨论】：

标签： javascript html twitter-bootstrap popover

【解决方案1】：

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

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');
  }

});

【讨论】：

谢谢，这帮了大忙！现在我只需要一次只打开一个弹出窗口...

【解决方案2】：

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

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

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

【讨论】：