我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
$("body").find('.popover').removeClass('in');
其他回答
$('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");
});
}
});
我想到了这个: 我的场景是在同一个页面上包含更多弹窗,隐藏它们只是让它们不可见,因此,点击弹窗后面的项目是不可能的。 这个想法是将特定的弹出窗口链接标记为“活动”,然后你可以简单地“切换”活动弹出窗口。这样做将完全关闭弹窗 $ (' .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"
接受答案的最新更新有一个问题: 如果您启用了一些工具提示,然后打开一个弹出窗口,然后单击具有工具提示的元素,则工具提示的文本将显示为弹出窗口。
为了防止这种情况,只需添加
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
}
}
});
});
好吧,这是我第一次尝试在stackoverflow上回答一些东西,所以这里什么都没有:P
似乎不太清楚这个功能在最新的引导程序上是否能够开箱即用(好吧,如果您愿意在用户可以单击的地方做出妥协的话。我不确定你是否必须设置“点击悬停”,但在iPad上,点击是一种切换。
最终的结果是,在桌面上,你可以悬停或点击(大多数用户都会悬停)。在触控设备上,触摸元素将使其上升,再次触摸将使其下降。当然,这与你最初的需求有一点妥协,但至少你的代码现在更干净了:)
$ (" .my-popover ") .popover ({ 触发:'点击悬停' });
这个解决方案很有效:
$("body") .on('click' ,'[data-toggle="popover"]', function(e) {
e.stopPropagation();
});
$("body") .on('click' ,'.popover' , function(e) {
e.stopPropagation();
});
$("body") .on('click' , function(e) {
$('[data-toggle="popover"]').popover('hide');
});