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

【问题标题】：Fullcalendar with bootstrap popover z-Index issue带有引导弹出窗口 z-Index 问题的完整日历
【发布时间】：2016-09-27 15:10:25
【问题描述】：

我正在尝试集成完整的日历调度程序和引导弹出窗口。但是，我遇到了 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，也无法找出它落后于事件的原因..

【问题讨论】：

标签： css twitter-bootstrap fullcalendar popover fullcalendar-scheduler

【解决方案1】：

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

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

                });

Working JSFiddle

【讨论】：

【解决方案2】：

我更喜欢将它附加到 .fc-scroller，这样当日历滚动时，弹出框会随着事件滚动。

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

【讨论】：