jQuery 单击弹出窗口触发元素时，如何关闭/关闭 Bootstrap 弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15944698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I close / dismiss Bootstrap Popover when clicking the popover trigger element?
提问by Ryan
jsFiddle: http://jsfiddle.net/kAYyR/
jsFiddle：http: //jsfiddle.net/kAYyR/
Screenshot:
截屏：
Here's what works:
这是有效的：
- Open popover on button click
- Close popover on click outside popover
- Close popover on click of
.closebutton
- 单击按钮打开弹出窗口
- 在弹出框外单击时关闭弹出框
- 单击
.close按钮关闭弹出窗口
BUT... I cannot get the popover to close when you click the original button again. Instead the popover flashes off and on again.
但是...当您再次单击原始按钮时，我无法关闭弹出窗口。相反，弹出框会反复闪烁。
Duplicate it yourself here.
在这里自己复制。
How can I accomplish this?
我怎样才能做到这一点？
HTML:
HTML：
<button id="popoverId" class="popoverThis btn btn-large btn-danger">Click to toggle popover</button>
<div id="popoverContent" class="hide">This <em>rich</em> <pre>html</pre> content goes inside popover</div>
JS:
JS：
$('#popoverId').popover({
html: true,
title: "Popover Title",
content: function () {
return $('#popoverContent').html();
}
});
var isVisible = false;
var clickedAway = false;
$('.popoverThis').popover({
html: true,
trigger: 'manual'
}).click(function (e) {
$(this).popover('show');
$('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">×</a>');
clickedAway = false
isVisible = true
e.preventDefault()
});
$(document).click(function (e) {
if (isVisible & clickedAway) {
$('.popoverThis').popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
});
回答by Steely Wing
Do you want work like this ?
你想要这样的工作吗？
$('#popoverId').popover({
html: true,
title: 'Popover Title<a class="close" href="#");">×</a>',
content: $('#popoverContent').html(),
});
$('#popoverId').click(function (e) {
e.stopPropagation();
});
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('#popoverId').popover('hide');
}
});
回答by Cam Tullos
I use this:
我用这个：
$('[data-toggle="popover"]').popover({html: true, container: 'body'});
$('[data-toggle="popover"]').click(function (e) {
e.preventDefault();
$('[data-toggle="popover"]').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function (e) {
if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
回答by emrah kasal
This simple code will hide all popovers on the page $('.popover').popover('hide');
这个简单的代码将隐藏页面上的所有弹出窗口 $('.popover').popover('hide');
回答by Hafsal Rh
it can simply done by using this code
它可以通过使用此代码简单地完成
<div id='content'>something here</div>
$('[data-toggle=popover]').popover({
html: true,
content: function () {
return $('#content').html();
}
}).click(function (e) {
$('[data-toggle=popover]').not(this).popover('hide');
});
