本文介绍了单击弹出框触发元素时,如何关闭/关闭 Bootstrap 弹出框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
jsFiddle:
以下是有效的:
- 点击按钮打开弹出框
- 在弹出框外点击关闭弹出框
- 点击
.close
按钮关闭弹出框
但是...当您再次单击原始按钮时,我无法关闭弹出框.相反,弹出框会闪烁并再次闪烁.
自己复制这里.
我怎样才能做到这一点?
HTML:
<button id="popoverId" class="popoverThis btn btn-large btn-danger">点击切换popover</button><div id="popoverContent" class="hide">这个<em>丰富</em><pre>html</pre>内容进入弹出框</div>
JS:
$('#popoverId').popover({html: 是的,标题:弹出标题",内容:函数(){返回 $('#popoverContent').html();}});var isVisible = false;var clickedAway = false;$('.popoverThis').popover({html: 是的,触发器:'手动'}).click(函数 (e) {$(this).popover('show');$('.popover-content').append('<a class="close" style="position: absolute; top: 0; right: 6px;">×</a>');clickedAway = falseisVisible = 真e.preventDefault()});$(文档).click(函数 (e) {if (isVisible & clickedAway) {$('.popoverThis').popover('隐藏')isVisible = clickedAway = false} 别的 {clickedAway = true}});
解决方案
你想要这样的工作吗?
$('#popoverId').popover({html: 是的,title: '弹出框标题<a class="close" href="#");">×</a>',内容:$('#popoverContent').html(),});$('#popoverId').click(function (e) {e.stopPropagation();});$(文档).click(函数 (e) {if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {$('#popoverId').popover('hide');}});
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
.close
button
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:
<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:
$('#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
}
});
解决方案
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');
}
});
这篇关于单击弹出框触发元素时,如何关闭/关闭 Bootstrap 弹出框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!