我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
演示:http://jsfiddle.net/nessajtr/yxpM5/1/
var clickOver = clickOver || {};
clickOver.uniqueId = $.now();
clickOver.ClickOver = function (selector, options) {
var self = this;
//default values
var isVisible, clickedAway = false;
var callbackMethod = options.content;
var uniqueDiv = document.createElement("div");
var divId = uniqueDiv.id = ++clickOver.uniqueId;
uniqueDiv.innerHTML = options.loadingContent();
options.trigger = 'manual';
options.animation = false;
options.content = uniqueDiv;
self.onClose = function () {
$("#" + divId).html(options.loadingContent());
$(selector).popover('hide')
isVisible = clickedAway = false;
};
self.onCallback = function (result) {
$("#" + divId).html(result);
};
$(selector).popover(options);
//events
$(selector).bind("click", function (e) {
$(selector).filter(function (f) {
return $(selector)[f] != e.target;
}).popover('hide');
$(selector).popover("show");
callbackMethod(self.onCallback);
isVisible = !(clickedAway = false);
});
$(document).bind("click", function (e) {
if (isVisible && clickedAway && $(e.target).parents(".popover").length == 0) {
self.onClose();
isVisible = clickedAway = false;
} else clickedAway = true;
});
}
这是我的解。
其他回答
$('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");
});
}
});
好吧,这是我第一次尝试在stackoverflow上回答一些东西,所以这里什么都没有:P
似乎不太清楚这个功能在最新的引导程序上是否能够开箱即用(好吧,如果您愿意在用户可以单击的地方做出妥协的话。我不确定你是否必须设置“点击悬停”,但在iPad上,点击是一种切换。
最终的结果是,在桌面上,你可以悬停或点击(大多数用户都会悬停)。在触控设备上,触摸元素将使其上升,再次触摸将使其下降。当然,这与你最初的需求有一点妥协,但至少你的代码现在更干净了:)
$ (" .my-popover ") .popover ({ 触发:'点击悬停' });
这个问题之前已经被问到过了。我当时给出的答案仍然适用:
我也有类似的需求,并找到了这个很棒的小扩展的Twitter引导弹窗由李卡迈克尔,称为BootstrapX -点击。他还提供了一些用法示例。基本上,它会将弹出窗口更改为一个交互式组件,当您单击页面的其他地方或弹出窗口中的关闭按钮时,该组件将关闭。这也将允许多个弹窗一次打开和一堆其他不错的功能。
只需将此属性添加到html元素,以关闭弹出窗口在下次点击。
data-trigger="focus"
参考来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click
我有问题与mattdlockyer的解决方案,因为我设置弹窗链接动态使用如下代码:
$('body').popover({
selector : '[rel="popover"]'
});
所以我必须这样修改它。它为我解决了很多问题:
$('html').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');
}
});
});
记住destroy删除元素,所以选择器部分在初始化弹窗时很重要。