使用表单隐藏 Bootstrap 弹出窗口
Hiding Bootstrap popover with form
我有问题。在我的网站上是 bootstrap 弹出窗口和 select 框。当我点击弹出框时我需要,必须隐藏它。我解决了这个问题,但是当我关闭弹出窗口以重新启动时,必须双击按钮。这是不好的。
这是我的代码:
<a href="#" id="changeStatusLink" type="button"
class="pull-right" data-container="body" data-toggle="popover"
data-placement="bottom" data-original-title="" data-html="true"
style="margin-right: 0"><span class="glyphicon glyphicon-pencil"></span></a>
弹出框内容:
<div id="changeStatusPopover" class="hide"><form>...</form></div>
JS:
$('#changeStatusLink').popover({
html: true,
content: function () {
return $('#changeStatusPopover').html();
}
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0
&& $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
感谢帮助
更新了你的 jsfiddle:http://jsfiddle.net/z824fn6b/315/
它现在对我有用。
我刚刚添加了一个容器:
<div class="container">
我有问题。在我的网站上是 bootstrap 弹出窗口和 select 框。当我点击弹出框时我需要,必须隐藏它。我解决了这个问题,但是当我关闭弹出窗口以重新启动时,必须双击按钮。这是不好的。 这是我的代码:
<a href="#" id="changeStatusLink" type="button"
class="pull-right" data-container="body" data-toggle="popover"
data-placement="bottom" data-original-title="" data-html="true"
style="margin-right: 0"><span class="glyphicon glyphicon-pencil"></span></a>
弹出框内容:
<div id="changeStatusPopover" class="hide"><form>...</form></div>
JS:
$('#changeStatusLink').popover({
html: true,
content: function () {
return $('#changeStatusPopover').html();
}
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
if (!$(this).is(e.target) && $(this).has(e.target).length === 0
&& $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
感谢帮助
更新了你的 jsfiddle:http://jsfiddle.net/z824fn6b/315/
它现在对我有用。
我刚刚添加了一个容器:
<div class="container">