Modal Window Project

This project demonstrates how to build a simple modal window component using HTML, CSS, and JavaScript. The modal opens when clicking one of the buttons and can be closed by clicking a close button, clicking outside the modal, or pressing the Esc key.

Key Features:

• Modal opening: Opens when clicking one of the trigger buttons.
• Multiple ways to close the modal:
  • Click the close button.
  • Click outside the modal (on the overlay).
  • Press the Esc key.
• CSS class manipulation: Uses CSS classes to show/hide the modal and overlay.
• DOM manipulation: Efficient handling of user interactions and dynamic changes to HTML elements via JavaScript.

Technologies Used:

• HTML: For the structure of the modal and buttons.
• CSS: For styling the modal and overlay, including showing and hiding elements.
• JavaScript: For handling events like opening and closing the modal.

How It Works:

1. Modal structure: The modal is defined in the HTML but hidden by default using a .hidden CSS class.
2. Event handling: JavaScript is used to add event listeners to the buttons, enabling the modal to appear and disappear.
3. Key interactions: The modal can be closed by clicking the overlay or pressing the Esc key.

Future Enhancements:

Add animations when the modal appears/disappears. Make the modal more responsive for different screen sizes.

License

This project is open-source and available under the MIT License.