当前位置：首页 > React

react实现简单的modal

2026-01-27 17:43:01React

实现 React Modal 的基本方法

使用 React 创建一个简单的 Modal 组件可以通过以下方式实现：

创建 Modal 组件文件

import React from "react";
import "./Modal.css";

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button className="close-button" onClick={onClose}>
          &times;
        </button>
        {children}
      </div>
    </div>
  );
};

export default Modal;

添加基本样式

react实现简单的modal

.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;
  z-index: 1000;
}

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

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

在父组件中使用 Modal

父组件示例

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

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>打开Modal</button>

      <Modal 
        isOpen={isModalOpen} 
        onClose={() => setIsModalOpen(false)}
      >
        <h2>Modal标题</h2>
        <p>这里是Modal的内容...</p>
      </Modal>
    </div>
  );
};

export default App;

添加动画效果

为Modal添加淡入淡出动画可以通过CSS过渡实现：

react实现简单的modal

更新Modal.css

.modal-overlay {
  /* 原有样式 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.modal-open {
  opacity: 1;
}

.modal-content {
  /* 原有样式 */
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.modal-open .modal-content {
  transform: translateY(0);
}

更新Modal组件

const Modal = ({ isOpen, onClose, children }) => {
  return (
    <div className={`modal-overlay ${isOpen ? "modal-open" : ""}`}>
      <div className="modal-content">
        {/* 其余代码不变 */}
      </div>
    </div>
  );
};

使用React Portal优化

对于更专业的实现，可以使用React Portal确保Modal渲染在body层级：

import ReactDOM from "react-dom";

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay">
      {/* 其余Modal内容 */}
    </div>,
    document.body
  );
};