正如您在jQuery中看到的那样,我使用了this question的答案,使外部点击中的Bootstrap Popover消失。现在我想在右上角添加一个“x”,在点击时关闭弹出窗口。
是否有一种简单的方法可以在弹出窗口的右上角创建一个可点击的“x”,以便在点击时关闭弹出窗口?
HTML:
<h3>Live demo</h3>
<div class="bs-docs-example" style="padding-bottom: 24px;">
<a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
jQuery的:
var isVisible = false;
var clickedAway = false;
$('.btn-danger').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('show');
clickedAway = false
isVisible = true
e.preventDefault()
});
$(document).click(function(e) {
if (isVisible & clickedAway) {
$('.btn-danger').popover('hide')
isVisible = clickedAway = false
} else {
clickedAway = true
}
});
答案 0 :(得分:16)
这是jquery代码:
这个只是将X按钮添加到右上角:
var isVisible = false;
var clickedAway = false;
$('.btn-danger').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('show');
$('.popover-title').append('<button type="button" class="close">×</button>');
clickedAway = false
isVisible = true
e.preventDefault()
});
$(document).click(function(e) {
if(isVisible & clickedAway)
{
$('.btn-danger').popover('hide')
isVisible = clickedAway = false
}
else
{
clickedAway = true
}
});
只有在点击X按钮时,才会关闭弹出窗口:
$('.btn-danger').popover({
html: true,
trigger: 'manual'
}).click(function(e) {
$(this).popover('show');
$('.popover-title').append('<button type="button" class="close">×</button>');
$('.close').click(function(e){
$('.btn-danger').popover('hide');
});
e.preventDefault();
});
答案 1 :(得分:1)
我知道这个问题已经回答了,但你的帖子半帮了我。偶然发现了一个简单的方法来完成这个任务,假设你有所有类型为'.pop'的popovers,这应该可以解决你所有的问题
$('.pop').on({
click:function(){
$('.pop').not(this).popover('hide');
}
});