Skip to content

Latest commit

 

History

History
29 lines (23 loc) · 1.47 KB

README.md

File metadata and controls

29 lines (23 loc) · 1.47 KB
Raw

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.