As you can see in the jQuery, I have used the answer from this question to make a Bootstrap Popover disappear on an outside click. Now I am looking to add an "x" in the top right corner that closes the popover on click.
Is there a simple way to create a clickable "x" on the top right corner of the popover that would close the popover when clicked?
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
}
});
here is the jquery code:
This one just adds the X button to the right upper corner:
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
}
});
And this one closes the popup only when the X button is clicked:
$('.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();
});
I kno this question has been answered already but your post semi-helped me . Stumbled across a simplier way to acomplish this task suppose you have all popovers with the class '.pop', this should solve all your problems
$('.pop').on({
click:function(){
$('.pop').not(this).popover('hide');
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With