如何从页面上的任何位置(否则)单击关闭Twitter Bootstrap弹出窗口？
我目前正在使用带有Twitter Bootstrap的popovers，启动方式如下：
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.preventDefault();
});正如您所看到的，它们是手动触发的，单击.popup-marker (带有背景图像的div )切换弹出窗口。这很好用，但我也希望能够通过单击页面上的任何其他位置来关闭弹出窗口(但不是在弹出窗口本身！)。
我尝试了一些不同的方法，包括以下内容，但没有显示任何结果：
$('body').click(function(e) {
$('.popup-marker').popover('hide');
});如何通过单击页面上的其他位置来关闭弹出窗口，而不是单击弹出窗口本身？
回答 30
Stack Overflow用户
发布于 2012-01-21 06:18:29
假设在任何时候只有一个弹出框可见，您可以使用一组标志来标记何时有弹出框可见，然后才会隐藏它们。
如果您在单据正文上设置了事件监听器，那么当您点击带有'popup-marker‘的元素时，事件监听器就会触发。因此，您必须在事件对象上调用stopPropagation()。并在单击弹出窗口本身时应用相同的技巧。
下面是一个可以执行此操作的JavaScript代码。它使用jQuery >= 1.7
jQuery(function() {
var isVisible = false;
var hideAllPopovers = function() {
$('.popup-marker').each(function() {
$(this).popover('hide');
});
};
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).on('click', function(e) {
// if any other popovers are visible, hide them
if(isVisible) {
hideAllPopovers();
}
$(this).popover('show');
// handle clicking on the popover itself
$('.popover').off('click').on('click', function(e) {
e.stopPropagation(); // prevent event for bubbling up => will not get caught with document.onclick
});
isVisible = true;
e.stopPropagation();
});
$(document).on('click', function(e) {
hideAllPopovers();
isVisible = false;
});
});http://jsfiddle.net/AFffL/539/
唯一的警告是你不能同时打开2个弹出窗口。但我认为这会让用户感到困惑:-)
Stack Overflow用户
发布于 2012-06-21 23:21:14
这甚至更简单：
$('html').click(function(e) {
$('.popup-marker').popover('hide');
});
$('.popup-marker').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('toggle');
e.stopPropagation();
});Stack Overflow用户
发布于 2012-06-14 16:36:45
我也有类似的需求，于是找到了这个great little extension of the Twitter Bootstrap Popover by Lee Carmichael, called BootstrapX - clickover。他也有一些here的用法示例。基本上，它会将弹出窗口更改为一个交互式组件，当您在页面上的其他地方单击或在弹出窗口内的关闭按钮上单击时，该组件将关闭。这也将允许一次打开多个弹出窗口和一堆其他不错的功能。
使用示例
<button rel="clickover" data-content="Show something here.
<button data-dismiss='clickover'
>Close Clickover</button>"
>Show clickover</button>javascript：
// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();https://stackoverflow.com/questions/8947749
复制相似问题
腾讯云开发者
