我需要找到适用于多个弹出窗口和Bootstrap 3的东西。
这是我所做的:
我有多个元素想要做一个弹窗工作,所以我不想使用id。
标记可能是:
<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 = [
以及所有3个按钮的javascript:
当容器是默认未附加到主体的容器时,此方法有效。
$('.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- describeby查找弹出窗口并将其隐藏。
$('.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');
});
});