我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
根据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'
})
其他回答
这对我很管用。
分解:
首先,向主体添加一个单击事件侦听器。
单击,检查是否有一个带有弹窗类的元素(Bootstrap在解散时从DOM中删除弹窗元素)。
如果.popover元素存在,请检查事件。目标,它会告诉你用户在页面上点击了哪里。如果它是.popover元素的一部分,什么都不做。如果不是,隐藏弹窗(文档在这里)。
注意:aria- descripbedby条件可以防止弹窗在最初被触发/显示时被隐藏。
document.body。addEventListener('点击',事件=> { let ispopoverdisplays = Boolean(document.querySelector('.popover')); let isclickknotpopover = !event.target. nearest ('.popover'); 如果( isPopoverShown & & isClickNotPopover & & ! event.target ? .getAttribute (aria-describedby) ? .startsWith(窗) ) { $ (' .popover ') .popover(隐藏的) } })
如果你使用选择器委托创建弹出窗口,那么'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
$('html').on('mouseup', function(e) {
if(!$(e.target).closest('.popover').length) {
$('.popover').each(function(){
$(this.previousSibling).popover('hide');
});
}
});
这将关闭所有弹出窗口,如果你点击任何地方,除了一个弹出窗口
更新引导4.1
$("html").on("mouseup", function (e) {
var l = $(e.target);
if (l[0].className.indexOf("popover") == -1) {
$(".popover").each(function () {
$(this).popover("hide");
});
}
});
对于任何人寻找一个解决方案,工作与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();
}
}
}
}
});
我做了一个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');
});