我需要找到适用于多个弹出框且适用于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 = [
'<div>',
'<button class="btn btn-link cancel">Cancel</button>',
'<button class="btn btn-primary save">Save</button>',
'</div>'].join('\n');
和所有3个按钮的javascript代码:
当容器为默认值且未附加到body时,此方法可行。
$('.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');
});
});
当容器附加到 'body' 时
然后,使用 aria-describedby 查找弹出窗口并隐藏它。
$('.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');
});
});
onclick
替换为data-dismiss="popover"
无效。这是一个被广泛记录的问题。 - Hengjie$(elm).popover('hide')
有时(我不确定是否总是如此)会让弹出窗口保持在原位,并添加一个.fade
类,使其透明度为0。这会导致用户无法选择文本等问题。更好的解决方法是使用$(elm).popover('toggle')
。 - Swashata Ghosh