我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
对于任何人寻找一个解决方案,工作与Bootstrap 5和没有jQuery,即使弹出窗口是动态生成(即手动触发):
document.querySelector('body').addEventListener('click', function(e) {
var in_popover = e.target.closest(".popover");
if (!in_popover) {
var popovers = document.querySelectorAll('.popover.show');
if (popovers[0]) {
var triggler_selector = `[aria-describedby=${popovers[0].id}]`;
if (!e.target.closest(triggler_selector)) {
let the_trigger = document.querySelector(triggler_selector);
if (the_trigger) {
bootstrap.Popover.getInstance(the_trigger).hide();
}
}
}
}
});
其他回答
这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体,它会隐藏所有其他弹窗。animation:false是必需的,否则你将在你的控制台得到jquery .remove错误。
$('.clickable').popover({
trigger: 'manual',
animation: false
}).click (evt) ->
$('.clickable').popover('hide')
evt.stopPropagation()
$(this).popover('show')
$('html').on 'click', (evt) ->
$('.clickable').popover('hide')
我只是在新弹出窗口显示之前删除其他活动弹出窗口(bootstrap 3):
$(".my-popover").popover();
$(".my-popover").on('show.bs.popover',function () {
$('.popover.in').remove();
});
更新:稍微健壮一点的解决方案:http://jsfiddle.net/mattdlockyer/C5GBU/72/
对于只包含文本的按钮:
$('body').on('click', function (e) {
//did not click a popover toggle or popover
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
对于包含图标的按钮使用(此代码在Bootstrap 3.3.6中有一个错误,请参阅下面的回答中的修复)
$('body').on('click', function (e) {
//did not click a popover toggle, or icon in popover toggle, or popover
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('[data-toggle="popover"]').length === 0
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
对于JS生成的弹窗,使用“[data-original-title]”来代替“[data-toggle="popover"]”
注意:上面的解决方案允许同时打开多个弹窗。
请一次一个弹窗:
更新:Bootstrap 3.0。x,参见代码或小提琴http://jsfiddle.net/mattdlockyer/C5GBU/2/
$('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('hide');
}
});
});
这处理关闭弹窗已经打开,没有点击或他们的链接没有点击。
更新:引导3.3.6,见小提琴
修复关闭后需要2次点击才能重新打开的问题
$(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) {
(($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false // fix for BS 3.3.6
}
});
});
更新:使用之前改进的条件,实现了这个解决方案。修复了双击和幽灵弹窗的问题
$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
$(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
$(this).attr('someattr','0');
});
$(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).attr('someattr')=="1"){
$(this).popover("toggle");
}
}
});
});
只需将此属性添加到元素中
data-trigger="focus"
我找到了一个解决这个问题的好方法。 通过这种方式,我们只在需要时激活事件侦听器。 此外,我们没有弹窗不出现的问题,因为 事件解除弹出窗口正在同时开火。
将弹出窗口添加到HTML中
<input id="popoverId" type="text" data-toggle="popover" data-trigger="manual" data-content="Popover content">
当你需要时显示弹出窗口。
$('#popoverId').popover('show');
将这个侦听器添加到Javascript中。这个侦听器将在弹出窗口显示时立即启动 并将一个侦听器附加到将隐藏 当用户单击页面主体的任何位置时弹出窗口,然后删除事件侦听器,直到弹出窗口再次显示。
$('#popoverId').on('shown.bs.popover', function () {
$('body').click(function () {
$('#popoverId').popover('hide');
$('body').off();
});
});