jsFiddle: http://jsfiddle.net/kAYyR/
Screenshot:
Here's what works:
.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');
}
});
I use this:
$('[data-toggle="popover"]').popover({html: true, container: 'body'});
$('[data-toggle="popover"]').click(function (e) {
e.preventDefault();
$('[data-toggle="popover"]').not(this).popover('hide');
$(this).popover('toggle');
});
$(document).click(function (e) {
if ($(e.target).parent().find('[data-toggle="popover"]').length > 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
这个简单的代码将隐藏页面上的所有弹出窗口$('。popover')。popover('hide');
it can simply done by using this code
<div id='content'>something here</div>
$('[data-toggle=popover]').popover({
html: true,
content: function () {
return $('#content').html();
}
}).click(function (e) {
$('[data-toggle=popover]').not(this).popover('hide');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.