react-full-screen组件中Material UI Modal无法正常工作的解决求助

核心问题分析 #

react-full-screen开启全屏时，会将目标元素纳入全屏上下文，而多数UI组件库的Modal默认挂载到document.body下，脱离了全屏容器的上下文，导致在全屏模式下无法正确渲染或被全屏层遮挡。

具体实现方案 #

1. 将Modal挂载到全屏容器内部 #

把Modal的挂载目标指定为全屏组件的容器元素，确保它处于全屏上下文范围内。

示例代码（以Ant Design Modal为例）：

import React, { useRef, useState } from 'react';
import { FullScreen, useFullScreenHandle } from 'react-full-screen';
import { Modal, Button } from 'antd';

function FullScreenModal() {
  const handle = useFullScreenHandle();
  const fullScreenContainerRef = useRef(null);
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <div>
      <Button onClick={handle.enter}>进入全屏</Button>
      <FullScreen handle={handle} ref={fullScreenContainerRef}>
        <div style={{ padding: '20px' }}>
          <Button onClick={() => setModalVisible(true)}>打开Modal</Button>
          {/* 指定Modal挂载到全屏容器内 */}
          <Modal
            title="全屏内的Modal"
            visible={modalVisible}
            onCancel={() => setModalVisible(false)}
            footer={null}
            getContainer={() => fullScreenContainerRef.current}
          >
            <p>这个Modal可以在全屏模式下正常显示和交互</p>
          </Modal>
        </div>
      </FullScreen>
    </div>
  );
}

export default FullScreenModal;

2. 调整z-index层级避免遮挡 #

如果Modal显示在全屏层下方，手动设置更高的z-index值：

/* 全局样式中添加 */
.full-screen-modal {
  z-index: 99999 !important; /* 确保数值大于react-full-screen容器的z-index */
}

给Modal添加对应类名：

<Modal
  // 其他属性
  className="full-screen-modal"
/>

3. 自定义Modal的适配方案 #

如果是自行封装的Modal，确保它的DOM节点直接作为全屏容器的子元素：

function CustomModal({ visible, onClose }) {
  if (!visible) return null;
  return (
    <div className="custom-modal-overlay">
      <div className="custom-modal-content">
        <h3>自定义Modal</h3>
        <button onClick={onClose}>关闭</button>
      </div>
    </div>
  );
}

// 在全屏组件内使用
<FullScreen handle={handle}>
  <div>
    <button onClick={() => setModalVisible(true)}>打开自定义Modal</button>
    <CustomModal visible={modalVisible} onClose={() => setModalVisible(false)} />
  </div>
</FullScreen>

添加样式确保Modal覆盖全屏区域：

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.custom-modal-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
}

关键注意事项 #

• 禁止Modal脱离全屏容器的DOM树，始终保持它作为全屏容器的子元素或后代元素。
• 全屏模式下浏览器会限制部分DOM操作，避免Modal依赖全屏外的DOM节点渲染。
• 测试多浏览器兼容性，部分浏览器对全屏内弹窗的层级处理有特殊逻辑。

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