Model Window Project

OverView

This is a simple JavaScript project that creates a modal window for displaying additional information. The modal window can be triggered to open by clicking on elements with the class show-modal. Users can close the modal by clicking the close button, the overlay, or by pressing the 'Escape' key.

Features

1. Clicking on elements with the class show-modal opens the modal window.
2. The modal can be closed by clicking the close button, the overlay, or by pressing the 'Escape' key.

Usage

1. Add the show-modal class to any HTML elements that should trigger the modal.
2. Clicking on the specified elements will display the modal window.
3. To close the modal, either click the close button, the overlay, or press the 'Escape' key.

Code Structure

The code uses strict mode and consists of the following key components:

• showModal: Elements with this class trigger the display of the modal.
• closeModal: The button inside the modal to close it.
• overlay: The overlay behind the modal.
• modal: The modal window itself.
• addBtnModal(): Function to hide the modal and overlay.
• removeBtnModal(): Function to show the modal and overlay.
• Event listeners for clicks on elements with the show-modal class, the overlay, and the close button.
• An event listener for the 'Escape' key to close the modal.

Author

Author -@ahmadfed

Feel free to customize this code for your needs or use it as a starting point for creating modal windows in your projects!

Contact me

LinkedIn : LinkedIn
Gmail : My Gmail