javascript - bootstrap 3 中的多个弹出窗口(弹出窗口之上的弹出窗口)？

Question

我希望实现一个用户点击第一级按钮的菜单，它具有弹出效果。然后用户点击二级菜单，另一个弹出窗口出现。我尝试在网上查找，但没有太多有用的信息。可行吗？模拟图片已附在下面。

Answer 1

1. 您需要将弹出框内容设置为支持 html official documentation .

2. 您需要在第一个弹出窗口之后初始化第二个弹出窗口被触发。

HTML:

<button id="firstpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">
  Popover on left
</button>

<button id="secondpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-content="test" data-placement="right">  Popover on left
</button>

JS:

var second = $('#secondpopover').remove();
var first = $('#firstpopover');

second.show();
first.data('content', second);

first.popover({html: true});

first.on('shown.bs.popover', function () {
    second.popover();
})

first.on('hidden.bs.popover', function () {
    second.popover('hide');
})

CSS:

#secondpopover {
    display: none;
}

DEMO