css - 带有引导弹出窗口 z-Index 问题的完整日历

Question

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

我尝试为 popover 以及我的 popover 内部 html 设置 z-index。没有任何效果。

这是我的小提琴链接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>'

                    });
                }

过去 3 天尝试了很多，但即使我增加了 z-index，也无法找出它落后的原因。

Answer 1

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

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

                });

工作 JSFiddle

Answer 2

我更喜欢将它附加到 .fc-scroller 以便在滚动日历时，弹出框将随着事件滚动。

                element.popover({
                    trigger: "click",
                    container:$(element).closest('.fc-scroller');
                });