当前位置：首页 > React

react实现弹出框

2026-01-27 00:59:24React

React 实现弹出框的方法

使用 React 内置状态管理

通过 React 的 useState 钩子管理弹出框的显示与隐藏状态。创建一个按钮触发弹出框的显示，并在弹出框中添加关闭按钮。

import React, { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹出框</button>
      {isOpen && (
        <div className="popup">
          <div className="popup-content">
            <h3>弹出框标题</h3>
            <p>这里是弹出框的内容</p>
            <button onClick={() => setIsOpen(false)}>关闭</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default Popup;

使用第三方库（如 React Modal）

react-modal 是一个流行的库，提供了更多自定义选项和更好的可访问性支持。

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

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

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹出框</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例弹出框"
      >
        <h3>弹出框标题</h3>
        <p>这里是弹出框的内容</p>
        <button onClick={() => setIsOpen(false)}>关闭</button>
      </Modal>
    </div>
  );
}

export default Popup;

添加动画效果

使用 CSS 或动画库（如 framer-motion）为弹出框添加过渡效果。

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹出框</button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            className="popup"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div
              className="popup-content"
              initial={{ y: -50 }}
              animate={{ y: 0 }}
            >
              <h3>弹出框标题</h3>
              <p>这里是弹出框的内容</p>
              <button onClick={() => setIsOpen(false)}>关闭</button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default Popup;

样式设置

为弹出框添加基本样式，确保其居中显示并覆盖背景。

react实现弹出框

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

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