Welcome to Modal Window Magic! This project showcases an interactive modal window that enhances user experience on your web pages. Perfect for notifications, information displays, or any engaging content you want to highlight.
- Multiple Modals: Open different modal windows with a single click!
- Smooth Transitions: Experience seamless appearance and disappearance of modals.
- Accessibility: Close the modal using the ESC key for better accessibility.
- Responsive Design: Looks great on all devicesβdesktop, tablet, and mobile!
Follow these simple steps to set up the project locally:
git clone https://github.com/Nalan-PandiKumar/Modal.git
cd ModalOpen index.html in your favorite browser and enjoy the modal experience!
The modal functionality is powered by vanilla JavaScript, CSS, and HTML. Hereβs a quick breakdown of how it operates:
- Opening the Modal: When any of the buttons are clicked, the modal appears with a delightful transition.
- Closing the Modal: The modal can be closed by clicking the 'Γ' button, clicking outside the modal on the overlay, or pressing the ESC key.
- HTML5
- CSS3
- JavaScript ES6+
Feel free to customize the modal appearance and functionality:
- Change the background colors and text styles in
style.css. - Add more content to the modal in
index.html. - Expand JavaScript functionality in
script.jsto make the modal even more interactive!
We love contributions! If you have suggestions or improvements, please fork the repository and create a pull request.
For any questions, feel free to reach out:
- Name: [NalanPandiKumar](mailto: nalanpandimadurai@gmail.com)
- GitHub: Nalan-PandiKumar
Thank you for checking out Modal Window Magic! We hope it adds some sparkle to your web projects. β¨