twitter-bootstrap - 引导弹出框

Question

我希望能够在弹出框外部单击以使其消失。

此代码运行良好 - 打开另一个弹出框时关闭一个弹出框，当然当您再次单击该按钮时它会消失。

var $visiblePopover;

$('body').on('click', '[rel="popover"]', function() {
  var $this = $(this);

  // check if the one clicked is now shown
  if ($this.data('popover').tip().hasClass('in')) {

// if another was showing, hide it
$visiblePopover && $visiblePopover.popover('hide');

// then store reference to current popover
$visiblePopover = $this;

  } else { // if it was hidden, then nothing must be showing
$visiblePopover = '';
  }
});​

我需要保留此当前功能，但要对其进行修改，以便在您单击弹出框外部时也可以执行相同的操作。

Answer 1

您只需添加：

$('html').click(function(e) {
     $('.btn').popover('hide');
});

jsfiddle

Answer 2

如果您想关闭除已单击的弹出框之外的所有其他弹出框，这个小技巧很方便：

$('.popover').click(function (evt) {
    evt.stopPropagation();
    $('.popover').not(this).popover('hide');
});

Answer 3

$.fn.modal.Constructor = Modal
$(function () {
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function (e) {


if($visiblePopover && $visiblePopover){
alert("HIDE POPOVER WHEN MODAL IS OPENED")
$visiblePopover && $visiblePopover.popover('hide');
}
        var $this = $(this),
            href = $this.attr('href'),
            $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))),
            option = $target.data('modal') ? 'toggle' : $.extend({
                remote: !/#/.test(href) && href
            }, $target.data(), $this.data())
            e.preventDefault()
            $target.modal(option).one('hide', function () {
                $this.focus()

            })
    })
})

Answer 4

在 bootstrap.min.js 的末尾添加此代码
1）2 弹出框被点击总是隐藏旧弹出框
2）点击弹出框外部也将隐藏

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});

Answer 5

单击打开弹出框的按钮时，它应该获得焦点。当您单击离开时，它会失去焦点，您可以使用.blur()捕捉它，然后使用popover('hide').