Modal 不隐藏 FullCalendar 元素

Question

我在 React 中使用 FullCalendar，当单击按钮时需要一个模式 pop-up。

我遇到的问题是日历的某些元素不会在叠加层后面淡化，而是完全不透明并在模式前面。

具体来说，在 dayGridMonth 视图中，元素是构成日历的内部网格、每个单元格中的日期数字、事件和当天突出显示（即所有 internal calendar elements）。但是，工具栏 header、日期文本和外部边框都按需要隐藏了。

在 listDay 或 listWeek 视图中，只有工具栏中的活动按钮出现异常。

我试过实现一个普通的 JS 模态并使用 react-modal。两个问题都存在。

import { useState } from "react";
import TaskModal from './TaskModal';

function Calendar (props) {
  const [modalOpen, setModalOpen] = useState(false);

  function addEvent () {
    setModalOpen(true);
  }

  return (
    <div>
      <FullCalendar
        headerToolbar={{
          start: "addEvent",
          center: "foo",
          end: "bar",
        }}
        customButtons={{
          addEvent: {
            text: "+",
            click: addEvent,
          }
        }}
        some other props...
      >
      <TaskModal modalOpen={modalOpen} setModalOpen={setModalOpen} />
    </div>
  );
}

import Modal from "react-modal";


export default function TaskModal (props) {
  Modal.setAppElement("#root");

  return (
    <Modal
      isOpen={props.taskModalVisible}
      onRequestClose={false}
      contentLabel="My dialog"
    >
      <div>My modal dialog.</div>
      <button onClick={() => props.setTaskModalVisible(false)}>Close modal</button>
    </Modal>
  );
}

Answer 1

问题很简单，问题元素的 CSS z-index 非常高（高达 999）。通过向 Modal 添加 className 和 overlayClassName 属性解决了这个问题。然后给这些类一个更高的 z-index 这样其他的都会落后。

Modal 不隐藏 FullCalendar 元素

Modal does not hide FullCalendar elements

reactjs

fullcalendar