重现问题的方法:
当我将拖动元素(从FullCalendar的外部)拖到FullCalendar,然后启动Bootstrap Modal时,Modal-BackDrop 覆盖了模态。相反,当我不将可滴管元素放到日历上时,模态是可见的,而模态backdrop 没有覆盖模态。
其他信息:
当我拖动和删除Fullcalendar内部的元素时,引导模态效果很好。
我确定的东西:
- bootstrap模式位于
<body></body>
标签之间。
fullcalendar初始化:
$('#calendar').fullCalendar({
locale:'pl',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
views: {
month: {
editable: false,
droppable: false,
}
},
slotDuration: '00:15:00',
droppable: true,
defaultDate: date,
defaultView: viewName,
editable: true,
timeFormat:'H(:mm)',
minTime: "07:00:00",
maxTime: "18:00:00",
allDaySlot: false,
events: eventsArray,
eventRender: function(event, element) {
element.find(".fc-event-title").remove();
element.find(".fc-event-time").remove();
element.find(".fc-time").remove();
var new_description =
moment(event.start).format("HH:mm") + '-'
+ moment(event.end).format("HH:mm")
;
element.append(new_description);
},
dayRender: function (date, cell) {
var date = moment(date).format("YYYY-MM-DD");
for(var i in holidays) {
if(date === holidays[i].date) {
cell.css("background-color", "#FFCBCB");
}
}
},
});
模态初始化:
var modal = $('#addElementModal');
modal.modal();
我已经找到了这种情况的解决方案:
我已经添加到<div class="modal">...modalcontent...</div>
以下属性:
data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"
只是删除模态背景并添加其自己的背景。