Мені потрібно було знайти щось, що могло б працювати для декількох поповерів та в Bootstrap 3.
Ось що я зробив:
У мене було кілька елементів, для яких я хотів, щоб працювала поповер, тому я не хотів використовувати ідентифікатори.
Розмітка може бути:
<button class="btn btn-link foo" type="button">Show Popover 1</button>
<button class="btn btn-link foo" type="button">Show Popover 2</button>
<button class="btn btn-link foo" type="button">Show Popover 3</button>
Вміст кнопок збереження та закриття всередині покажчика:
var contentHtml = [
та javascript для всіх 3 кнопок:
Цей метод працює, коли контейнер за замовчуванням не прикріплений до тіла.
$('.foo').popover({
title: 'Bar',
html: true,
content: contentHtml,
trigger: 'manual'
}).on('shown.bs.popover', function () {
var $popup = $(this);
$(this).next('.popover').find('button.cancel').click(function (e) {
$popup.popover('hide');
});
$(this).next('.popover').find('button.save').click(function (e) {
$popup.popover('hide');
});
});
Коли контейнер прикріплений до "тіла"
Потім використовуйте aria-describy, щоб знайти спливаюче вікно та приховати його.
$('.foo').popover({
title: 'Bar',
html: true,
content: contentHtml,
container: 'body',
trigger: 'manual'
}).on('shown.bs.popover', function (eventShown) {
var $popup = $('#' + $(eventShown.target).attr('aria-describedby'));
$popup.find('button.cancel').click(function (e) {
$popup.popover('hide');
});
$popup.find('button.save').click(function (e) {
$popup.popover('hide');
});
});
