FullCalendar出现在z-index较高的背景后面

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图让FullCalendar的某些事件出现在我创建的背景前，但我无法改变z-index，但我不知道为什么。FullCalendar出现在z-index较高的背景后面

我已经设法得到背景前的整个日历div，但我似乎无法针对一个事件，并设置Z指数。

我对模态和背景没有那么多的经验 - 我错过了CSS属性吗？

$(document).ready(function() {  
    $("#calendar").fullCalendar({  
    header: {  
     right: "prev,next"  
    },  
    slotDuration: "00:05:00",  
    slotLabelInterval: "00:15:00",  
    contentHeight: "auto",  
    defaultView: "agendaWeek",  
    eventDurationEditable: false,  
    allDaySlot: false,  
    eventLimit: true,  
    events: [{  
     title: "Test Entry",  
     start: "2017-12-18T01:00:00",  
     end: "2017-12-18T02:00:00"  
    }]  
    });  
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');  
@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');  
#calendar {  
    width: 800px;  
    position: absolute;  
}  
.fc-event {  
    z-index: 20;  
}  
#backdrop {  
    position: absolute;  
    z-index: 10;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    opacity: 0.8;  
    background-color: rgb(0, 0, 0);  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>  
<div id="backdrop">  
</div>  
<div id="calendar">  
</div>

Codepen：https://codepen.io/anon/pen/YYwrqq

回答：

这工作，更新你如何渴望：

$(document).ready(function() {  
    $("#calendar").fullCalendar({  
    header: {  
     right: "prev,next"  
    },  
    slotDuration: "00:05:00",  
    slotLabelInterval: "00:15:00",  
    contentHeight: "auto",  
    defaultView: "agendaWeek",  
    eventDurationEditable: false,  
    allDaySlot: false,  
    eventLimit: true,  
    events: [{  
     title: "Test Entry",  
     start: "2017-12-18T01:00:00",  
     end: "2017-12-18T02:00:00"  
    }]  
    });  
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');  
@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');  
#backdrop {  
    position: absolute;  
    z-index: 0;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    opacity: 0.8;  
    background-color: rgb(0, 0, 0);  
}  
#calendar {  
    width: 800px;  
    position: absolute;  
    z-index: 1;  
}  
.fc td,  
.fc th {  
    background-color: rgba(0, 0, 0, .8) !important;  
    border: 1px solid rgba(0, 0, 0, .8) !important;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>  
<div id="backdrop">  
</div>  
<div id="calendar">  
</div>

以上是 FullCalendar出现在z-index较高的背景后面 的全部内容， 来源链接： utcz.com/qa/263292.html

回到顶部