本文介绍了单击弹出触发器元素时,如何关闭/关闭Bootstrap Popover?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
jsFiddle:
这是什么作品:
- 点击按钮打开popover
- 点击popover外面的pop关闭
- 单击
关闭弹出窗口.close
按钮
但是......再次单击原始按钮时,我无法关闭弹出窗口。相反,弹出窗口会再次闪烁。
自己复制。
我该如何做到这一点?
HTML:
< button id =popoverIdclass =popoverThis btn btn-large btn-danger >点击以切换popover< / button>
< div id =popoverContentclass =hide>此< em> rich< / em> <预> HTML< /预>内容进入popover< / div>
JS:
$('#popoverId')。popover({
html:true,
title:Popover Title,
content:function( ){
返回$('#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 =closestyle =position:absolute; top: 0;右:6px;>& times;< / a>');
clickedAway = false
isVisible = true
e.preventDefault()
}) ;
$(document).click(function(e){
if(isVisible& clickedAway){
$('。popoverThis')。popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
});
解决方案
你想要这样的工作吗?
$('#popoverId')。popover({
html:true,
title: 'Popover Title< a class =closehref =#);>& times;< / 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');
}
});
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 Popover?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!