嘿，我刚好折腾过这个需求，用React Modal完全能搞定！核心就是同时管理两个模态框的显示状态，再通过样式调整让子模态框盖在父模态框上面，父模态框留在后台不消失。下面是具体的实现方案：

核心思路 #

我们需要在组件里维护两个独立的状态，分别控制父、子模态框的显示/隐藏，再通过z-index样式确保子模态框层级更高，同时让父模态框保持可见状态。

1. 完整代码示例 #

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

// 先初始化Modal的根元素（这是React Modal的必填配置）
Modal.setAppElement('#root');

const NestedModalDemo = () => {
  // 父模态框的显示状态
  const [isParentModalOpen, setIsParentModalOpen] = useState(false);
  // 子模态框的显示状态
  const [isChildModalOpen, setIsChildModalOpen] = useState(false);

  return (
    <div className="app-container">
      {/* 触发父模态框的按钮 */}
      <button onClick={() => setIsParentModalOpen(true)}>打开父模态框</button>

      {/* 父模态框组件 */}
      <Modal
        isOpen={isParentModalOpen}
        onRequestClose={() => setIsParentModalOpen(false)}
        // 自定义父模态框样式，确保它在子模态框打开时保持可见
        style={{
          overlay: {
            backgroundColor: 'rgba(0, 0, 0, 0.4)', // 半透明背景，保留可见性
            zIndex: 1000 // 设置父模态框的基础层级
          },
          content: {
            zIndex: 1001,
            width: '90%',
            maxWidth: '600px',
            margin: '2rem auto'
          }
        }}
      >
        <h3>父模态框</h3>
        <p>点击下方按钮打开子模态框，我会留在后台哦～</p>
        <button onClick={() => setIsChildModalOpen(true)}>打开子模态框</button>
        <button onClick={() => setIsParentModalOpen(false)}>关闭父模态框</button>
      </Modal>

      {/* 子模态框组件 */}
      <Modal
        isOpen={isChildModalOpen}
        onRequestClose={() => setIsChildModalOpen(false)}
        // 子模态框的层级必须高于父模态框，确保显示在最上层
        style={{
          overlay: {
            backgroundColor: 'rgba(0, 0, 0, 0.6)', // 比父模态框背景稍暗，突出子框
            zIndex: 2000 // 层级高于父模态框
          },
          content: {
            zIndex: 2001,
            width: '80%',
            maxWidth: '450px',
            margin: '2rem auto'
          }
        }}
      >
        <h3>子模态框</h3>
        <p>我是弹出的子模态框，父模态框就在我背后哦</p>
        <button onClick={() => setIsChildModalOpen(false)}>关闭子模态框</button>
      </Modal>
    </div>
  );
};

export default NestedModalDemo;

2. 关键细节说明 #

• 独立状态管理：用两个useState分别控制两个模态框的显示，这样父模态框不会因为子模态框打开而自动关闭。
• 层级控制：子模态框的overlay和content的z-index必须高于父模态框，这是确保子框盖在父框上面的核心。
• 父框样式优化：父模态框的背景设为半透明，既能让用户感知到它的存在，又不会干扰子模态框的操作。如果需要让父框在子框打开时无法被点击，可以给父框的content加上pointer-events: none，但要单独给父框内的按钮设置pointer-events: auto，避免按钮失效。

内容的提问来源于stack exchange，提问作者user4217999