我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
最简单,最安全的版本,适用于任何引导版本。
演示: 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 v3.3.7进行测试
$('body').on('click', function (e) {
$('.popover').each(function () {
var popover = $(this).data('bs.popover');
if (!popover.$element.is(e.target)) {
popover.inState.click = false;
popover.hide();
}
});
});
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
根据http://getbootstrap.com/javascript/#popovers,
<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>
使用焦点触发器可以在用户下一次单击时取消弹出窗口。
$('.popover-dismiss').popover({
trigger: 'focus'
})
如果你使用选择器委托创建弹出窗口,那么'hide'方法似乎不起作用,而必须使用'destroy'。
我是这样做的:
$('body').popover({
selector: '[data-toggle="popover"]'
});
$('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) {
$(this).popover('destroy');
}
});
});
关于这个课题JSfiddle
好吧,这是我第一次尝试在stackoverflow上回答一些东西,所以这里什么都没有:P
似乎不太清楚这个功能在最新的引导程序上是否能够开箱即用(好吧,如果您愿意在用户可以单击的地方做出妥协的话。我不确定你是否必须设置“点击悬停”,但在iPad上,点击是一种切换。
最终的结果是,在桌面上,你可以悬停或点击(大多数用户都会悬停)。在触控设备上,触摸元素将使其上升,再次触摸将使其下降。当然,这与你最初的需求有一点妥协,但至少你的代码现在更干净了:)
$ (" .my-popover ") .popover ({ 触发:'点击悬停' });