我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
这基本上不是很复杂,但有一些检查要做,以避免故障。
演示(jsfiddle)
var $poped = $('someselector');
// Trigger for the popover
$poped.each(function() {
var $this = $(this);
$this.on('hover',function() {
var popover = $this.data('popover');
var shown = popover && popover.tip().is(':visible');
if(shown) return; // Avoids flashing
$this.popover('show');
});
});
// Trigger for the hiding
$('html').on('click.popover.data-api',function() {
$poped.popover('hide');
});
其他回答
我有问题与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删除元素,所以选择器部分在初始化弹窗时很重要。
用3.3.6测试,第二次点击是ok的
$('[data-toggle="popover"]').popover()
.click(function () {
$(this).popover('toggle');
});;
$(document).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('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');
}
});
我们发现我们从@mattdlockyer的解决方案中有一个问题(感谢解决方案!)当像这样使用弹出窗口构造函数的selector属性时…
$(document.body').popover({selector: '[data-toggle=popover]'});
...BS3的解决方案行不通。相反,它会在$(this)的本地创建第二个弹出窗口实例。以下是我们预防这种情况的解决方案:
$(document.body).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) {
var bsPopover = $(this).data('bs.popover'); // Here's where the magic happens
if (bsPopover) bsPopover.hide();
}
});
});
如前所述,$(this).popover('hide');由于委托的侦听器,将创建第二个实例。提供的解决方案只隐藏已经实例化的弹窗。
希望我能帮你们节省点时间。
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });