Tôi cần tìm thứ gì đó có thể hoạt động cho nhiều cửa sổ bật lên và trong Bootstrap 3.
Đây là những gì tôi đã làm:
Tôi có nhiều phần tử mà tôi muốn có một tác phẩm bật lên, vì vậy tôi không muốn sử dụng id.
Đánh dấu có thể là:
<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>
Nội dung cho các nút lưu và đóng bên trong cửa sổ bật lên:
var contentHtml = [
và javascript cho cả 3 nút:
Phương pháp này hoạt động khi vùng chứa là mặc định không được đính kèm với nội dung.
$('.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');
});
});
Khi vùng chứa được gắn vào 'body'
Sau đó, sử dụng aria được mô tả bằng cách tìm cửa sổ bật lên và ẩn nó đi.
$('.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');
});
});
