我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
如果你使用选择器委托创建弹出窗口,那么'hide'方法似乎不起作用,而必须使用'destroy'。
我是这样做的:
$('body').popover({
selector: '[data-toggle="popover"]'
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('destroy');
}
});
});
关于这个课题JSfiddle
其他回答
来自@guya的答案是有效的,除非你在弹出窗口中有像日期选择器或时间选择器这样的东西。为了解决这个问题,这就是我所做的。
if (typeof $(e.target).data('original-title') === 'undefined' &&
!$(e.target).parents().is('.popover.in')) {
var x = $(this).parents().context;
if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
$('[data-original-title]').popover('hide');
}
}
$('html').on('click.popover', function (e) {
var allpopins = $('.popover.in');
if (allpopins.has(e.target).length > 0 &&
!$('.btn', allpopins).is(e.target))
return;
// recognise pop-up
var id = $(e.target).attr('aria-describedby');
var popin = $("#" + id);
//on any button click in entire pop-up hide this pop-ups
$(popin).on(".btn", function () { popin.remove(); });
// on any place out of entire popup hide all pop-ups
$('.popover.in').not(popin).remove();
});
这是我最好的性能解决方案。欢呼。
接受答案的最新更新有一个问题: 如果您启用了一些工具提示,然后打开一个弹出窗口,然后单击具有工具提示的元素,则工具提示的文本将显示为弹出窗口。
为了防止这种情况,只需添加
if ($(this).data('bs.popover')) {
在if-statement内部(或将其与&&连接到if-statement中)
// only show one popover at the time and hide on clicking outside
$(document).on('click', function (e) {
$('[data-toggle="popover"],[data-original-title]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
if ($(this).data('bs.popover')) {
(($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false // fix for BS 3.3.6
}
}
});
});
我做了一个jsfiddle来告诉你如何做到这一点:
http://jsfiddle.net/3yHTH/
其思想是在单击按钮时显示弹出窗口,在单击按钮外时隐藏弹出窗口。
HTML
<a id="button" href="#" class="btn btn-danger">Click for popover</a>
JS
$('#button').popover({
trigger: 'manual',
position: 'bottom',
title: 'Example',
content: 'Popover example for SO'
}).click(function(evt) {
evt.stopPropagation();
$(this).popover('show');
});
$('html').click(function() {
$('#button').popover('hide');
});
根据http://getbootstrap.com/javascript/#popovers,
<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>
使用焦点触发器可以在用户下一次单击时取消弹出窗口。
$('.popover-dismiss').popover({
trigger: 'focus'
})