React实现弹框全屏

React 实现弹框全屏的方法

使用 CSS 样式控制全屏

通过设置弹框的 CSS 样式，使其覆盖整个视口。可以使用 position: fixed 和 width、height 设置为 100%。

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="fullscreen-modal">
          <div className="modal-content">
            <button onClick={() => setIsOpen(false)}>关闭</button>
            <h1>全屏弹框内容</h1>
          </div>
        </div>
      )}
    </div>
  );
};

export default FullScreenModal;

对应的 CSS 文件：

.fullscreen-modal {
  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: 80%;
  max-height: 80%;
  overflow: auto;
}

使用 React Portal 优化全屏弹框

使用 ReactDOM.createPortal 将弹框渲染到 body 的直接子元素，避免样式层级问题。

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

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

  const Modal = () => (
    <div className="fullscreen-modal">
      <div className="modal-content">
        <button onClick={() => setIsOpen(false)}>关闭</button>
        <h1>全屏弹框内容</h1>
      </div>
    </div>
  );

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开全屏弹框</button>
      {isOpen && ReactDOM.createPortal(<Modal />, document.body)}
    </div>
  );
};

export default FullScreenModal;

使用第三方库实现全屏弹框

许多第三方库（如 react-modal 或 material-ui）提供了开箱即用的全屏弹框功能。

使用 react-modal 实现全屏弹框：

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

Modal.setAppElement('#root');

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

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

export default FullScreenModal;

对应的 CSS 文件：

.fullscreen-modal {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  background-color: white;
  overflow: auto;
}

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

动态切换全屏模式

通过监听浏览器全屏 API，动态切换弹框的全屏状态。

import React, { useState } from 'react';

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

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().catch(err => {
        console.error('全屏模式错误:', err);
      });
    } else {
      document.exitFullscreen();
    }
  };

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

export default FullScreenModal;

响应式全屏弹框

结合媒体查询或 JavaScript 动态调整弹框大小，确保在不同设备上全屏显示效果一致。

@media (max-width: 768px) {
  .fullscreen-modal {
    padding: 10px;
  }

  .modal-content {
    max-width: 95%;
    max-height: 95%;
  }
}

通过以上方法，可以灵活地在 React 中实现全屏弹框功能。