我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体,它会隐藏所有其他弹窗。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')
其他回答
我想到了这个: 我的场景是在同一个页面上包含更多弹窗,隐藏它们只是让它们不可见,因此,点击弹窗后面的项目是不可能的。 这个想法是将特定的弹出窗口链接标记为“活动”,然后你可以简单地“切换”活动弹出窗口。这样做将完全关闭弹窗 $ (' .popover-link ')。弹出窗口({HTML: true,容器:'body'})
$('.popover-link').popover().on 'shown.bs.popover', ->
$(this).addClass('toggled')
$('.popover-link').popover().on 'hidden.bs.popover', ->
$(this).removeClass('toggled')
$("body").on "click", (e) ->
$openedPopoverLink = $(".popover-link.toggled")
if $openedPopoverLink.has(e.target).length == 0
$openedPopoverLink.popover "toggle"
$openedPopoverLink.removeClass "toggled"
$(document).on('click', function(e) {
$('[data-toggle="popover"]').each(function() {
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
}
});
});
这对我很管用。
分解:
首先,向主体添加一个单击事件侦听器。
单击,检查是否有一个带有弹窗类的元素(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(隐藏的) } })
只需将此属性添加到元素中
data-trigger="focus"
根据最高的两个答案,我有一个小方法:
<span class="btn btn-info btn-minier popover-info" data-rel="popover"
data-placement="bottom" data-html="true" title=""
data-content="popover-content"
data-original-title="popover-title">
<i class="ace-icon fa fa-info smaller-100"></i>
</span>
$('[data-rel=popover]').popover({html: true});
$(document).on("shown.bs.popover", '[data-rel=popover]', function () {
$('[data-rel="popover"][popover-show="1"]').popover('hide');
$(this).attr('popover-show', '1');
});
$(document).on("hidden.bs.popover", '[data-rel=popover]', function () {
if ($(this).attr('popover-show') === '0') {
// My important fix: using bootstrap 3.4.1, if hide popover by .popover('hide') and click to show, popover internal treat it is already shown and dispatch hidden event immediately without popover anything.
$(this).popover('toggle');
} else {
$(this).attr('popover-show', '0');
}
});
$('html').on('click', function (e) {
if (typeof $(e.target).data('original-title') == 'undefined'
&& typeof $(e.target).parent().data('original-title') == 'undefined'
&& !$(e.target).parents().is('.popover.in')) {
$('[data-rel="popover"][popover-show="1"]').popover('hide');
}
});