css - Fullcalendar 与 bootstrap popover z-Index 问题

Question

我正在尝试集成完整的日历调度程序和 Bootstrap 弹出窗口。但是，我遇到了 UI 问题。

我尝试为弹出窗口以及弹出窗口内部 html 设置 z-index。没有任何效果。

这是我的 fiddle 链接 https://jsfiddle.net/87977p1x/5/

单击事件 2，您可以看到弹出窗口。这是 fullcalander 内的弹出窗口代码

eventRender: function (event, element) {

                    element.popover({
                        trigger: "click",

                        title: '<div class="label label-lg label-primary col-xs-12">' + event.title + '</div>',
                        html: true,
                        content: '<div style="width:70px">My content goes here.. blahhh blahhhh<div><div> Some more content in this div having more nested HTML</div>',
                        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'

                    });
                }

过去三天尝试了很多，但无法找出事件背后的原因，即使我增加了 z-index..

Answer 1

基于另一个问题Fullcalendar with Twitter Bootstrap Popover ，我应用了 container:'body' 它有效..

 element.popover({
                    trigger: "click",
                    container:'body',
                    // other settings...

                });

Working JSFiddle