我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
这个解决方案摆脱了烦人的第二次点击时,显示弹出窗口的第二次
使用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();
}
});
});
其他回答
只需将此属性添加到元素中
data-trigger="focus"
这个解决方案摆脱了烦人的第二次点击时,显示弹出窗口的第二次
使用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();
}
});
});
这对我很管用。
分解:
首先,向主体添加一个单击事件侦听器。
单击,检查是否有一个带有弹窗类的元素(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(隐藏的) } })
接受答案的最新更新有一个问题: 如果您启用了一些工具提示,然后打开一个弹出窗口,然后单击具有工具提示的元素,则工具提示的文本将显示为弹出窗口。
为了防止这种情况,只需添加
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
}
}
});
});
只需将此属性添加到html元素,以关闭弹出窗口在下次点击。
data-trigger="focus"
参考来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click