Modal Window Project

This project showcases an interactive modal window built using HTML, CSS, and JavaScript, which opens on button click and closes via a close button or by clicking outside the modal.

Features

• Interactive Modal: Opens upon clicking a button and closes when clicking the close button or outside the modal.
• Smooth Transitions: CSS provides smooth fading effects when the modal opens and closes.
• User-Friendly: The modal allows users to stay on the page while displaying important information in an overlay.
• Use key to close:- You can close the modal by pressing the 'Esc' key.

Technologies Used

• HTML: Used for structuring the modal and buttons.
• CSS: Used for styling the modal window, overlay, and adding smooth transitions.
• JavaScript: Used to handle modal interactions (open/close events).

Screenshots

How It Works

1. Modal Structure: The modal is created with HTML elements, including a close button.
2. CSS Styling: The modal is hidden by default and appears with a smooth transition when triggered.
3. JavaScript Interactions: JavaScript listens for button clicks to show or hide the modal.

Usage

1. Clone the repository or download the files.
2. Open the index.html file in your browser.
3. Click the "Open Modal" button to see the modal in action.
4. Click the close button or outside the modal to close it.

Project Setup

1. HTML: Defines the structure, including a button to trigger the modal and a modal overlay.
2. CSS: Adds styles for the modal window and the background, including animations for smooth transitions.
3. JavaScript: Handles the logic to open and close the modal when users interact with the page.