我的引导弹出窗口隐藏在完整日历中的行下时遇到问题。 我调用函数 eventRender。
我已经试过container: 'body'，它不起作用。trigger: 'focus'也不起作用。
如您所见，它是一个函数，它在 AJAX 之后被调用：成功。如果这就是导致此问题的原因？
我的代码：
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!');
}
}
]
});
}https://getbootstrap.com/docs/3.3/javascript/#popovers 的文档指出：
在
.btn-group或.input-group，或与表相关的元素(<td>、<th>、<tr>、<thead>、<tbody>，<tfoot>)，您必须指定选项container: 'body'(如下所述)以避免不必要的副作用(例如元素 当弹出框变宽和/或失去圆角时 触发)。
在您的特定情况下，我认为弹出框的顶部被隐藏了，因为它们被附加到日历单元格<td>内的 DOM，但对于它来说太大了，所以由于使用的绝对位置，弹出框的任何部分落在<td>尺寸之外都会被剪裁。我不是绝对 100% 确定这是正确的技术原因，但从观察来看，这就是似乎正在发生的事情(例如，如果您将弹出框的"顶部"值从 -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/演示了一个工作版本。
附言您在问题中提到您已经尝试过了，但是从我在JSFiddle中观察到的情况来看，没有理由不可能。