我目前正在使用Twitter Bootstrap的popovers,就像这样:
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.preventDefault();
});
如您所见,它们是手动触发的,然后单击.popup-marker(带有背景图像的div)切换弹出窗口 . 这很好用,但我也希望能够通过点击页面上任何其他位置来关闭popover(但不能在popover本身!) .
我尝试了一些不同的东西,包括以下内容,但没有显示结果:
$('body').click(function(e) {
$('.popup-marker').popover('hide');
});
How can I close the popover with a click anywhere else on the page, but not with a click onthe popover itself?
30 回答
假设在任何时候只能看到一个弹出窗口,您可以使用一组标记来标记弹出窗口何时可见,然后才隐藏它们 .
如果在文档正文上设置事件侦听器,则在单击标有'popup-marker'的元素时将触发该事件侦听器 . 所以你必须在事件对象上调用
stopPropagation()
. 单击弹出窗口时应用相同的技巧 .下面是一个可以执行此操作的JavaScript代码 . 它使用jQuery> = 1.7
http://jsfiddle.net/AFffL/539/
唯一需要注意的是,您无法同时打开2个弹出式窗口 . 但我觉得这对用户来说会让人感到困惑,无论如何:-)
这更容易:
我有类似的需求,发现这个great little extension of the Twitter Bootstrap Popover by Lee Carmichael, called BootstrapX - clickover . 他还有一些用法示例here . 基本上它会将popover更改为一个交互式组件,当您单击页面上的其他位置或弹出窗口中的关闭按钮时,该组件将关闭 . 这也将允许一次打开多个弹出窗口和一堆其他不错的功能 .
Plugin can be found here .
用法示例
JavaScript的:
接受的解决方案给了我一些问题(点击打开的popover的'.popup-marker'元素使得popovers随后不起作用) . 我想出了另一个适合我的解决方案,它非常简单(我正在使用Bootstrap 2.3.1):
更新:此代码也适用于Bootstrap 3!
阅读"Dismiss on next click"这里http://getbootstrap.com/javascript/#popovers
您可以使用焦点触发器在下次单击时关闭弹出窗口,但您必须使用
<a>
标记,而不是<button>
标记,并且还必须包含tabindex
属性...例:
我在使用bootstrap 2.3.2时遇到了一些问题 . 但我这样解决了:
所有现有的答案都相当薄弱,因为它们依赖捕获所有文档事件然后查找活动弹出窗口,或者修改对
.popover()
的调用 .更好的方法是在文档的主体上侦听
show.bs.popover
事件,然后做出相应的反应 . 下面是单击文档或按下esc时将关闭弹出窗口的代码,仅显示弹出窗口时的绑定事件侦听器:https://github.com/lecar-red/bootstrapx-clickover
它是twitter bootstrap popover的扩展,可以非常简单地解决问题 .
出于某种原因,这里没有其他解决方案适用于我 . 然而,经过大量的故障排除后,我终于找到了这种方法,它完美地起作用(至少对我而言) .
在我的情况下,我在表格中添加了一个弹出框,并将其绝对定位在单击的
td
上方/下方 . 表选择由jQuery-UI Selectable处理,所以我不确定这是否干扰 . 但是每当我在弹出窗口内单击时,我的单击处理程序(目标$('.popover')
)从未起作用,并且事件处理始终委托给$(html)
单击处理程序 . 我'm fairly new to JS so perhaps I'我只是遗漏了什么?无论如何,我希望这有助于某人!
我给我所有的弹出器锚定了类
activate_popover
. 我一次激活它们onload$('body').popover({selector: '.activate-popover', html : true, container: 'body'})
获取我使用的点击功能(在咖啡脚本中):
这与bootstrap 2.3.1完美搭配
虽然这里有很多解决方案,但是我知道是否有一些解决方案可以解决所有问题,但是我尝试了其中的3个并且它们有问题,比如点击它自己使它隐藏的popover,其他人那个如果我有另一个弹出按钮点击两个/多个弹出窗口仍然会出现(如在选定的解决方案中),如何, This one fixed it all
这个解决方案对我来说非常好,如果它可以帮助:
这是我的解决方案,它的 Value 在于:
稍微调整@David Wolever解决方案:
这个问题也是在这里问我的答案不仅提供了一种理解jQuery DOM遍历方法的方法,还提供了通过单击外部来处理弹出窗口关闭的两个选项 .
一次打开多个弹出窗口或一次打开一个弹出窗口 .
此外,这些小代码片段可以处理包含图标的按钮的关闭!
https://stackoverflow.com/a/14857326/1060487
这个就像一个魅力,我用它 .
当您单击时它将打开弹出框,如果再次单击它将关闭,如果您单击弹出框外部,将关闭弹出窗口 .
这也适用于超过1个popover .
我会将焦点设置为新创建的弹出窗口并在模糊时将其移除 . 这样就不需要检查DOM的哪个元素被点击,并且可以点击弹出窗口,也可以选择:它不会失去焦点而不会消失 .
代码:
我这样做如下
希望这可以帮助!
如果您正在尝试使用pjax的twitter bootstrap popover,这对我有用:
@RayOnAir,我和以前的解决方案有同样的问题 . 我也接近@RayOnAir解决方案 . 改进的一件事就是在点击其他popover标记时关闭已经打开的popover . 所以我的代码是:
我发现这是上面提到的pbaron建议的修改解决方案,因为他的解决方案使用类'popup-marker'激活所有元素上的popover('hide') . 但是,当你使用popover()代替数据内容时,正如我在下面所做的那样,html弹出窗口内的任何点击实际上都会激活popover('hide'),这会立即关闭窗口 . 下面的方法遍历每个.popup-marker元素,如果父元素与被点击的.popup-marker的id相关,则首先发现,如果是,则不会隐藏它 . 所有其他div都隐藏了......
我想出了这个:
我的场景在同一页面上包含更多弹出窗口,隐藏它们只是让它们不可见,因此,单击弹出窗口后面的项目是不可能的 . 我们的想法是将特定的popover-link标记为“active”,然后您可以简单地“切换”活动的popover . 这样做会完全关闭弹出窗口 .
我试图为一个简单的问题做一个简单的解决方案 . 上面的帖子很好但是对于一个简单的问题来说很复杂 . 所以我做了一件简单的事情 . 刚刚添加了一个关闭按钮 . 它对我来说很完美 .
我喜欢这个,简单而有效..
将
btn-popover
class添加到打开弹出窗口的弹出框按钮/链接 . 此代码将在其外部单击时关闭弹出窗口 .一个更简单的解决方案,只是迭代所有的弹出窗口并隐藏,如果不是
this
.要清楚,只需触发弹出窗口即可
另一个解决方案,它解决了我点击popover后代的问题:
试试
data-trigger="focus"
而不是"click"
.这解决了我的问题 .