https://github.com/adityamamta/open-modal

Animated Modal Popup build with HTML, CSS & Javscript
https://github.com/adityamamta/open-modal

frontend-web html-css-javascript modal-popup responsive web-ui

Last synced: 5 days ago
JSON representation

Animated Modal Popup build with HTML, CSS & Javscript

• Host: GitHub
• URL: https://github.com/adityamamta/open-modal
• Owner: adityamamta
• Created: 2024-11-15T08:22:45.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-11-15T17:12:19.000Z (about 2 months ago)
• Last Synced: 2024-11-15T18:22:25.479Z (about 2 months ago)
• Topics: frontend-web, html-css-javascript, modal-popup, responsive, web-ui
• Language: CSS
• Homepage: https://adityamamta.github.io/open-modal/
• Size: 613 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Modal Popup

## 

A sleek and responsive modal component built with HTML, CSS, and JavaScript, designed for displaying important messages or prompts in a user-friendly manner.

### Features:

- Interactive Modal: Opens and closes smoothly using button triggers.

- Animations:

     - Background and modal entrance animations for a polished user experience.

     - Smooth scaling effect on modal appearance.

- Responsive Design:

     - Fully optimized for desktops, tablets, and mobile devices.

     - Adjusts button layout for smaller screens.

- Customizable Styles: Easily tweak colors, font sizes, and dimensions using CSS variables.

### Technologies Used:

- HTML5 for the modal structure.

- CSS3 for styling, animations, and responsiveness.

- JavaScript for interactivity (toggle functionality).

### How It Works:

- Modal Triggers:

     - Buttons with the .modal-toggle class toggle the modal visibility.

- Animation Effects:

     - Background fades in smoothly.

     - Modal scales in with a subtle animation.

- Responsive Adaptation:

     - Button layout switches to a single-column format on smaller screens.

### 💼 Contact me 

- linkedin. [Linkedin](https://www.linkedin.com/in/adityamamta/)

- Email: [email protected]