Question

我有问题，我的引导程序弹出窗口被隐藏在完整日历中的行下面。我调用函数eventRender。

我尝试了container: 'body'，它没有用。 trigger: 'focus'也不起作用。

正如你可以看到它的一个功能，它在AJAX之后被调用：成功..如果导致这个问题是什么？

我的代码：

＆＃13;

   function showCalendar(userID){

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today,month',
                center: 'title',
                right: 'prevYear,nextYear'
            },
            selectable: true,
            selectHelper: true,
            eventRender: function(event, element){
                var dStart = event.start.format("DD MMMM");
                element.popover({
                    animation:true,
                    placement:'top',
                    html:true,
                    title:dStart,
                    trigger: 'click'
                });
            },
            showNonCurrentDates:false,
            weekNumbersWithinDays:true,
            locale: 'sv',
            weekNumbers: true,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            eventSources: [

                // your event source
                {
                    url: 'DATA/events.json' ,
                    type: 'GET',
                    data: {
                        userID: userID
                    },
                    error: function() {
                        alert('there was an error while fetching events!');
                    }
                }
            ]
        });

    }

＆＃13;

＆＃13; 这是一个JSFiddle：https://jsfiddle.net/pfsfdekp/3/

Answer 1

https://getbootstrap.com/docs/3.3/javascript/#popovers州的文件：

在.btn-group或其中的元素上使用弹出式窗口时 .input-group或表格相关元素（<td>，<th>，<tr>，<thead>， <tbody>，<tfoot>），您必须指定选项container: 'body' （记录如下）以避免不必要的副作用（如元素当弹出窗口越来越宽和/或失去圆角触发）。

在你的特定情况下，我认为弹出窗口的顶部是隐藏的，因为它们被附加到日历单元格的<td>内的DOM，但是它太大了，所以因为使用了绝对定位，弹出超出<td>尺寸范围的任何部分都会被剪裁。我并非绝对100％确定这是正确的技术原因，但从观察结果来看似乎正在发生（例如，如果你将popover的“top”值从-30px改为-10px，你可以看到更多，但是日历日之外的最高位仍然缺失。）

无论如何，要修复它，只需将该选项添加到弹出配置：

element.popover({
    animation: true,
    placement: 'top',
    html: true,
    title: dStart,
    trigger: 'click',
    container: 'body' //extra option
});

这会将弹出窗口附加到DOM的主<body>标记，在那里它们不受表格单元格的约束。由于它们绝对定位，它们仍然出现在与它们相关的事件相关的正确位置。您可以将它附加到您希望的任何DOM元素，但在这种情况下body最简单。

https://jsfiddle.net/pfsfdekp/4/演示了一个有效版本。

P.S。你在问题中提到你已经尝试过这个，但是从我在JSFiddle中可以观察到的情况来看，没有理由不应该这样做。

Fullcalendar引导程序弹出窗口被隐藏

1 个答案: