React实现全屏弹窗

React 实现全屏弹窗的方法

使用 CSS 样式控制全屏

通过 CSS 设置弹窗的样式，使其覆盖整个视口。以下是一个基本的实现示例：

import React, { useState } from 'react';
import './Modal.css';

const FullScreenModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开全屏弹窗</button>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">
            <button onClick={() => setIsOpen(false)}>关闭</button>
            <h1>全屏弹窗内容</h1>
          </div>
        </div>
      )}
    </div>
  );
};

export default FullScreenModal;

对应的 CSS 文件 Modal.css：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

使用第三方库

可以使用现成的 React 弹窗库，如 react-modal 或 @mui/material 的 Dialog 组件，快速实现全屏弹窗。

使用 react-modal 示例：

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root'); // 设置根元素以避免辅助功能警告

const FullScreenModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开全屏弹窗</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        style={{
          overlay: {
            backgroundColor: 'rgba(0, 0, 0, 0.8)'
          },
          content: {
            top: '0',
            left: '0',
            right: '0',
            bottom: '0',
            padding: '20px',
            borderRadius: '0'
          }
        }}
      >
        <button onClick={() => setIsOpen(false)}>关闭</button>
        <h1>全屏弹窗内容</h1>
      </Modal>
    </div>
  );
};

export default FullScreenModal;

使用 @mui/material 的 Dialog 组件：

import React, { useState } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';

const FullScreenModal = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button variant="contained" onClick={() => setIsOpen(true)}>
        打开全屏弹窗
      </Button>
      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        fullScreen
      >
        <DialogContent>
          <Button onClick={() => setIsOpen(false)}>关闭</Button>
          <h1>全屏弹窗内容</h1>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default FullScreenModal;

动态控制弹窗内容

如果需要动态加载内容，可以在弹窗中嵌入子组件或通过状态管理传递数据：

const FullScreenModalWithContent = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [content, setContent] = useState('');

  const loadContent = () => {
    setContent('动态加载的内容');
    setIsOpen(true);
  };

  return (
    <div>
      <button onClick={loadContent}>加载内容并打开弹窗</button>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">
            <button onClick={() => setIsOpen(false)}>关闭</button>
            <p>{content}</p>
          </div>
        </div>
      )}
    </div>
  );
};

注意事项

• 性能优化：全屏弹窗可能会影响页面性能，尤其是包含复杂内容时。可以通过懒加载或虚拟滚动优化。
• 无障碍支持：确保弹窗对屏幕阅读器友好，例如通过 aria-modal 和 aria-labelledby 属性。
• 移动端适配：在移动设备上测试弹窗的显示效果，避免内容溢出或交互问题。