我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
$('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");
});
}
});
其他回答
这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体,它会隐藏所有其他弹窗。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')
只需将此属性添加到html元素,以关闭弹出窗口在下次点击。
data-trigger="focus"
参考来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click
$('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");
});
}
});
最简单,最安全的版本,适用于任何引导版本。
演示: http://jsfiddle.net/guya/24mmM/
演示2:在弹出窗口内容中单击时不会解散 http://jsfiddle.net/guya/fjZja/
演示3:多个弹窗: http://jsfiddle.net/guya/6YCjW/
简单地调用这一行将会解散所有弹窗:
$('[data-original-title]').popover('hide');
当点击外部时,用下面的代码解散所有弹出窗口:
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined') {
$('[data-original-title]').popover('hide');
}
});
上面的代码片段在主体上附加了一个单击事件。 当用户点击弹出窗口时,它会正常运行。 当用户点击非弹窗的东西时,它会关闭所有弹窗。
它还可以与Javascript启动的弹窗一起工作,而不是其他一些不工作的例子。(详见演示)
如果你不想在点击弹出窗口内容时取消,请使用以下代码(参见第二个演示的链接):
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
$('[data-original-title]').popover('hide');
}
});
使用bootstrap 2.3.2,你可以将触发器设置为“focus”,它就可以工作了:
$('#el').popover({trigger:'focus'});