用 React 封装一个功能强大的 Modal 弹出框

需求导向

在当今快节奏的数字世界中，用户界面 (UI) 的设计变得越来越重要。用户希望能够轻松直观地与网站和应用程序进行交互。模态框是一种常用的 UI 元素，它可以用来显示重要信息或收集用户输入。

实现功能

1. 可以底部自定义按钮的样式，文字

   您可以通过修改 CSS 来自定义按钮的样式和文本。例如，您可以更改按钮的颜色、字体和大小。

2. 可以自定义内容

   您可以使用 HTML 和 CSS 来自定义模态框的内容。例如，您可以添加文本、图像和表单。

3. 使用Esc键可以关闭模态框

   您可以通过在模态框的组件中添加一个键盘事件监听器来实现这一功能。当用户按下 Esc 键时，该事件监听器将关闭模态框。

4. 使用shift可以自动聚焦关闭按钮，使用Enter实现关闭

   您可以通过在模态框的组件中添加一个键盘事件监听器来实现这一功能。当用户按下 Shift 键时，该事件监听器将自动聚焦关闭按钮。当用户按下 Enter 键时，该事件监听器将关闭模态框。

示例代码

import React, { useState } from "react";

const Modal = () => {
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
  };

  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      {showModal && (
        <div className="modal">
          <div className="modal-content">
            <div className="modal-header">
              <h2 className="modal-title">Modal Title</h2>
              <button className="modal-close-button" onClick={closeModal}>
                ×
              </button>
            </div>
            <div className="modal-body">
              <p>Modal content</p>
            </div>
            <div className="modal-footer">
              <button className="modal-button" onClick={closeModal}>
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Modal;

结语

希望本文对您有所帮助。如果您有任何问题，请随时留言。