反应模态滚动2重叠组件 - Javascript

在开发 Web 应用程序时，模态对话框可以帮助用户与应用程序进行交互。在许多情况下，模态对话框可以覆盖页面的某一部分。但是，在某些情况下，我们可能需要一个模态对话框可以重叠在另一个模态对话框上。

这时候，一个反应模态滚动2重叠组件就能很好的解决这个问题。这个组件可以让多个模态对话框叠加在一起，实现更复杂的页面操作。

主要特点

• 可以叠加多个模态对话框
• 支持滚动和键盘操作
• 自定义标题和内容

安装

使用 npm 安装：

npm install react-modal-scroll-2-overlap --save

示例

import React from 'react';
import Modal from 'react-modal';
import ModalOverlap from 'react-modal-scroll-2-overlap';

const App = () => {
  // 创建两个模态对话框
  const [modal1IsOpen, setModal1IsOpen] = useState(false);
  const [modal2IsOpen, setModal2IsOpen] = useState(false);

  const openModal1 = () => {
    setModal1IsOpen(true);
  };

  const closeModal1 = () => {
    setModal1IsOpen(false);
  };

  const openModal2 = () => {
    setModal2IsOpen(true);
  };

  const closeModal2 = () => {
    setModal2IsOpen(false);
  };

  return (
    <div>
      <button onClick={openModal1}>打开模态对话框1</button>
      <button onClick={openModal2}>打开模态对话框2</button>

      <ModalOverlap isOpen={modal1IsOpen} onRequestClose={closeModal1}>
        <Modal
          isOpen={true}
          onRequestClose={closeModal1}
        >
          <h2>模态对话框1</h2>
          <p>这是第一个模态对话框。</p>
        </Modal>
      </ModalOverlap>

      <ModalOverlap isOpen={modal2IsOpen} onRequestClose={closeModal2}>
        <Modal
          isOpen={true}
          onRequestClose={closeModal2}
        >
          <h2>模态对话框2</h2>
          <p>这是第二个模态对话框。</p>
        </Modal>
      </ModalOverlap>
    </div>
  );
};

export default App;

API

ModalOverlap

| Prop | Type | Default | Required | Description | | :----------------: | :------------------------------: | :--------------------------------------------------------: | :------: | ------------------------------------------------------------ | | isOpen | boolean | false | ✓ | 指示模态对话框是否显示 | | classNameOuter | string | react-modal-scroll-2-overlap-outer react-modal-content | | 模态对话框最外层容器的 class | | classNameInner | string | react-modal-scroll-2-overlap-inner | | 模态对话框内层容器的 class | | overlayClassName | string | react-modal-scroll-2-overlap-overlay | | 模态对话框遮罩层的 class | | onRequestClose | () => void | | ✓ | 关闭模态对话框的回调函数。点击遮罩层或按下 ESC 键时触发。 | | children | React.ReactNode | | ✓ | 子元素。必须是 react-modal 组件。 |

结论

使用反应模态滚动2重叠组件可以轻松实现多个模态对话框的叠加。这个组件非常易于拓展和使用，同时能够提供良好的用户体验。如果你需要在 Web 应用程序中使用模态对话框，可以考虑使用这个组件。