React-Bootstrap全屏模式对话框

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

function FullScreenModal() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        打开全屏对话框
      </Button>

      <Modal show={show} onHide={handleClose} dialogClassName="modal-90w">
        <Modal.Header closeButton>
          <Modal.Title>全屏对话框</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          这是一个全屏对话框的内容。
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            关闭
          </Button>
          <Button variant="primary" onClick={handleClose}>
            保存
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default FullScreenModal;

import 'bootstrap/dist/css/bootstrap.min.css';

.modal-dialog {
  max-width: 100% !important;
  height: 100% !important;
}