当前位置：首页 > React

react 实现弹出框

2026-01-26 20:26:37React

使用 React 实现弹出框

方法一：使用 React 状态管理弹出框的显示与隐藏

通过 useState 控制弹出框的可见性，结合条件渲染实现弹出效果。

import React, { useState } from 'react';

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

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

export default PopupModal;

方法二：使用第三方库（如 React Modal）

react-modal 提供了更丰富的功能和可访问性支持，适合复杂场景。

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

Modal.setAppElement('#root'); // 设置根元素以支持无障碍

function App() {
  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 App;

方法三：通过 Portal 实现脱离 DOM 层级的弹出框

使用 ReactDOM.createPortal 将弹出框渲染到 body 或其他指定节点，避免样式冲突。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹出框</button>
      {isOpen &&
        ReactDOM.createPortal(
          <div className="modal-overlay">
            <div className="modal-content">
              <h3>Portal 弹出框</h3>
              <button onClick={() => setIsOpen(false)}>关闭</button>
            </div>
          </div>,
          document.body
        )}
    </div>
  );
}

export default PortalModal;

样式建议

为弹出框添加基础 CSS 样式，增强用户体验。

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 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%;
}