/Modal-Window

Primary LanguageCSS

Modal Window 🖼️

A simple modal window project inspired by Jonas Schmedtmann, built with HTML, CSS, and JavaScript.

Introduction

This project demonstrates the creation of a modal window, commonly used in web applications to display additional information or interactive content without navigating away from the current page. The modal window appears on top of the page content and can be closed by clicking on the overlay or a close button.

Features

  • Three buttons to trigger different modal windows.
  • Each modal window contains a close button, and clicking outside the modal also closes it.
  • Keyboard escape key (ESC) can be used to close the modal window.
  • Responsive design for various screen sizes.

Technologies Used

  • HTML5
  • CSS3
  • JavaScript

File Structure

  • index.html: Contains the structure of the modal window and buttons.
  • style.css: Defines the styling rules for the HTML elements.
  • script.js: Implements the logic for opening and closing the modal windows.

Usage

  1. Open the index.html file in your web browser.
  2. Click on any of the "Show modal" buttons to display the corresponding modal window.
  3. To close the modal window, click on the close button or outside the modal window.
  4. Alternatively, you can press the escape key (ESC) on your keyboard to close the modal window.

Author

Anas Hany 🧑‍💻

Demo

You can view a live demo here! 🚀

Feel free to reach out if you have any questions or feedback! 📧