Question

我正在寻找创建一个弹出窗口，它有多个页面（不同的内容材料），在单击弹出窗口时会更新。我们的想法是你切换popover和“page1”内容加载，单击它将加载“page2”内容。

var $btn = $("#myButton");

$("html").click(function(){
    $btn.popover('hide');
});

$btn.popover({title: "Popover", html: "true", trigger: "manual", placement: "top", content: "<div id='page1'>Page 1</div>"}).click(function(e) {
$btn.popover('toggle');
e.stopPropagation();
});

我怎样才能做到这一点：

$("#page1").click(function() {
    $btn.popover.options.content = 'Page 2';
});

虽然在点击任何其他内容时包含关闭popover的功能，例如在this answer中？

Answer 1

使用.html更改内容并在点击#page1以外的任何内容时隐藏弹出窗口。

$('body').on('click', '#page1', function(e){
    $(this).html('Page 2');
    e.stopPropagation();
});

$("html").on('click', ':not("#page1")',function(){
    $btn.popover('hide');
});

Fiddle

Answer 2

如果您在框外单击并将所有内容添加为标签内容，我会将您的触发器更改为“焦点”，从而关闭弹出窗口。

动态更改Bootstrap Popovers中的文本

2 个答案: