我们能得到弹窗被解雇的方式一样的情态动词，即。使他们关闭时，用户点击以外的地方?
不幸的是，我不能用真实的模态来代替弹窗，因为模态意味着位置:固定，那样就没有弹窗了。:(
当前回答
最简单，最安全的版本，适用于任何引导版本。
演示: http://jsfiddle.net/guya/24mmM/
演示2:在弹出窗口内容中单击时不会解散 http://jsfiddle.net/guya/fjZja/
演示3:多个弹窗: http://jsfiddle.net/guya/6YCjW/
简单地调用这一行将会解散所有弹窗:
$('[data-original-title]').popover('hide');
当点击外部时，用下面的代码解散所有弹出窗口:
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined') {
$('[data-original-title]').popover('hide');
}
});
上面的代码片段在主体上附加了一个单击事件。 当用户点击弹出窗口时，它会正常运行。 当用户点击非弹窗的东西时，它会关闭所有弹窗。
它还可以与Javascript启动的弹窗一起工作，而不是其他一些不工作的例子。(详见演示)
如果你不想在点击弹出窗口内容时取消，请使用以下代码(参见第二个演示的链接):
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
$('[data-original-title]').popover('hide');
}
});
其他回答
最简单，最安全的版本，适用于任何引导版本。
演示: http://jsfiddle.net/guya/24mmM/
演示2:在弹出窗口内容中单击时不会解散 http://jsfiddle.net/guya/fjZja/
演示3:多个弹窗: http://jsfiddle.net/guya/6YCjW/
简单地调用这一行将会解散所有弹窗:
$('[data-original-title]').popover('hide');
当点击外部时，用下面的代码解散所有弹出窗口:
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined') {
$('[data-original-title]').popover('hide');
}
});
上面的代码片段在主体上附加了一个单击事件。 当用户点击弹出窗口时，它会正常运行。 当用户点击非弹窗的东西时，它会关闭所有弹窗。
它还可以与Javascript启动的弹窗一起工作，而不是其他一些不工作的例子。(详见演示)
如果你不想在点击弹出窗口内容时取消，请使用以下代码(参见第二个演示的链接):
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
$('[data-original-title]').popover('hide');
}
});
这基本上不是很复杂，但有一些检查要做，以避免故障。
演示(jsfiddle)
var $poped = $('someselector');
// Trigger for the popover
$poped.each(function() {
var $this = $(this);
$this.on('hover',function() {
var popover = $this.data('popover');
var shown = popover && popover.tip().is(':visible');
if(shown) return; // Avoids flashing
$this.popover('show');
});
});
// Trigger for the hiding
$('html').on('click.popover.data-api',function() {
$poped.popover('hide');
});
我只是在新弹出窗口显示之前删除其他活动弹出窗口(bootstrap 3):
$(".my-popover").popover();
$(".my-popover").on('show.bs.popover',function () {
$('.popover.in').remove();
});
这个解决方案摆脱了烦人的第二次点击时，显示弹出窗口的第二次
使用Bootstrap v3.3.7进行测试
$('body').on('click', function (e) {
$('.popover').each(function () {
var popover = $(this).data('bs.popover');
if (!popover.$element.is(e.target)) {
popover.inState.click = false;
popover.hide();
}
});
});
答案很好，只要添加一个angular指令，以防你像我一样使用angular:
app.directive('popover', ['$document', function($document) {
return {
restrict: 'EA',
link: function(scope, elem, attrs) {
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
elem.bind('click', function(e) {
$('#notification').popover('toggle');
})
$('body').on('click', function (e) {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!elem.is(e.target)
&& elem.has(e.target).length === 0
&& $('.popover').has(e.target).length === 0) {
elem.popover('hide');
}
});
}
};
}]);
html代码:
<a popover tabindex="0" role="button"
id="notification"
data-toggle="popover" data-trigger="manual"
data-container="body" data-placement="bottom"
data-content="This is a popover">
Popover button
</a>
它应该像使用data-trigger='click focus'一样简单，因为根据bootstrap:
弹出窗口如何触发-点击|悬停|焦点|手动。你可以传递多个触发器;用一个空格把它们分开。手动不能与任何其他触发器结合使用。
然而，由于未知的原因，同时使用点击和聚焦并不适合我，相反，我必须手动切换它。
