31 - Modal Window for Alerts and Confirmations

Description

Create a modal window component for displaying alerts and confirmations, with the following features:

• Displays messages and optional buttons for actions

• Overlays the main content to focus user attention

• Handles user interactions (e.g., button clicks) to close the modal or confirm actions

Algorithm

1. Create a React component for the modal window

2. Define the props for the modal window (message, buttons, onClose, onConfirm)

3. Use CSS to style the modal window and its components

4. Add JavaScript code to handle user interactions (button clicks, key presses)

Classes

• Modal: The main modal window component

• ModalContent: The content area of the modal window

• ModalFooter: The footer area of the modal window with buttons

Code

Modal.js

import React from 'react';
import './Modal.css';
import ModalContent from './ModalContent';
import ModalFooter from './ModalFooter';

const Modal = ({
  message,
  buttons,
  onClose,
  onConfirm
}) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleButtonClick = (button) => {
    if (button === 'confirm') {
      onConfirm();
    } else {
      onClose();
    }
  };

  return (
    <div className="modal" aria-hidden={!isOpen}>
      <ModalContent>
        <h5>{message}</h5>
      </ModalContent>
      <ModalFooter>
        {buttons.map((button, index) => (
          <button
            key={index}
            onClick={() => handleButtonClick(button)}
          >
            {button}
          </button>
        ))}
      </ModalFooter>
    </div>
  );
};

export default Modal;

ModalContent.js

import React from 'react';

const ModalContent = ({ children }) => {
  return <div className="modal-content">{children}</div>;
};

export default ModalContent;

ModalFooter.js

import React from 'react';

const ModalFooter = ({ children }) => {
  return <div className="modal-footer">{children}</div>;
};

export default ModalFooter;

Modal.css

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  width: 50%;
}

.modal-footer {
  background-color: #f9f9f9;
  padding: 10px;
  border-top: 1px solid #888;
  border-radius: 0 0 5px 5px;
}

.modal-footer button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal-footer button:hover {
  background-color: #0069d9;
}

.modal-content h5 {
  margin-top: 0;
}

.modal-content p {
  margin-bottom: 20px;
}

/* Media queries for responsive design */

@media (max-width: 768px) {
  .modal-content {
    width: 80%;
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 100%;
  }
  .modal-footer {
    flex-direction: column;
  }
  .modal-footer button {
    width: 100%;
  }
}

Explanation

The code creates a modal window component that displays a message and optional buttons for actions. The component uses the useState hook to manage the open/closed state of the modal window. The handleButtonClick function is called when a button is clicked, and it calls the onConfirm or onClose props depending on the button clicked.

Possible Future Enhancements

• Add animation effects to the modal window

• Support multiple modal windows at the same time

• Add a backdrop component to overlay the main content

• Use a library like React-Modal for a more robust implementation