当前位置：首页 > React

react modal 实现

2026-01-26 15:45:05React

React Modal 实现方法

使用原生 HTML 和 React 状态

通过 React 的状态管理控制模态框的显示与隐藏，结合 CSS 实现样式和动画。

import { useState } from 'react';

function Modal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>Modal Title</h2>
            <p>Modal content goes here.</p>
            <button onClick={() => setIsOpen(false)}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

CSS 样式示例：

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

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}

使用第三方库（如 React Modal）

react-modal 是一个流行的库，提供了更多功能和更好的可访问性支持。

安装：

npm install react-modal

使用示例：

import ReactModal from 'react-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <ReactModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="Example Modal"
      >
        <h2>Modal Title</h2>
        <p>Modal content goes here.</p>
        <button onClick={() => setIsOpen(false)}>Close</button>
      </ReactModal>
    </div>
  );
}

// 设置根元素以支持可访问性
ReactModal.setAppElement('#root');

使用 Material-UI 的 Dialog 组件

Material-UI 提供了 Dialog 组件，适合 Material Design 风格的项目。

安装：

npm install @mui/material @emotion/react @emotion/styled

使用示例：

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

function MuiModal() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button variant="contained" onClick={() => setOpen(true)}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogContent>
          <p>Dialog content goes here.</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Close</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

使用 Tailwind CSS 和 Headless UI

结合 Tailwind CSS 和 Headless UI 的 Dialog 组件实现无样式的可访问模态框。

安装：

npm install @headlessui/react

使用示例：

import { Dialog } from '@headlessui/react';

function HeadlessModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Dialog open={isOpen} onClose={() => setIsOpen(false)} className="relative z-50">
        <div className="fixed inset-0 bg-black/30" />
        <div className="fixed inset-0 flex items-center justify-center p-4">
          <Dialog.Panel className="w-full max-w-sm rounded bg-white p-6">
            <Dialog.Title>Modal Title</Dialog.Title>
            <Dialog.Description>Modal description.</Dialog.Description>
            <button onClick={() => setIsOpen(false)}>Close</button>
          </Dialog.Panel>
        </div>
      </Dialog>
    </div>
  );
}