FullCalendar周/日视图下AllDaySlot遮挡自定义弹窗关闭按钮如何解决

问题原因 #

这是层叠上下文优先级问题：FullCalendar周/日视图下的AllDaySlot容器自带的z-index数值高于你当前弹窗设置的z-index:1，所以会出现弹窗被遮挡、顶部关闭按钮无法点击的情况；月视图下AllDaySlot默认未启用或者层叠优先级更低，所以运行正常。

解决方法 #

• 优先级最高的方案是直接调高超弹窗的z-index，设置为远大于FullCalendar默认层级的数值即可，修改你的.popup样式：

.popup {
    display: none;
    position: fixed;
    z-index: 9999; /* 将原有值1替换为9999即可 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
}

• 如果修改z-index后仍然存在遮挡，检查弹窗的父级元素是否设置了transform、opacity<1、filter等会触发新层叠上下文的属性，这类属性会导致子元素的z-index无法全局生效，最简单的处理方式是将<div id="popupjs">元素直接移动到<body>标签下作为直接子元素，规避父元素层叠上下文的限制。
• 额外优化建议：你当前获取关闭按钮用的是getElementsByClassName("close")[1]，如果页面内其他位置存在close类的元素可能会出现索引错位，建议直接给关闭按钮添加独立id，用id选择器获取更稳妥。

内容的提问来源于stack exchange，提问作者LeBelge