🪟 Interactive Modal Window // Vanilla JavaScript Component

فارسی

A clean, accessible, and lightweight modal window component crafted with vanilla JavaScript, HTML5, and CSS3. Demonstrates robust DOM manipulation, multi-element event binding, and keyboard accessibility.

---

✨ Features

• 🔘 Multiple Triggers: Supports opening the modal from multiple buttons dynamically using querySelectorAll and event listeners.
• 🌫️ Backdrop Overlay: Blurs and dims the background content when the modal is active.
• 🚪 Multiple Dismissal Options:
  • Click the Close button (×) inside the modal.
  • Click anywhere on the dark overlay backdrop.
  • Press the Escape key on the keyboard.
• ⚡ Lightweight & Dependency-Free: Zero frameworks or external libraries, pure Vanilla JS and CSS.

---

🛠️ Built With

• HTML5 & CSS3 (Flexbox centering, backdrop-filter, transitions)
• Vanilla JavaScript (ES6+)
  • NodeList iteration & element selection
  • Class toggling (classList.add('hidden'), classList.remove('hidden'))
  • Global keyboard event listening (keydown for Escape)

---

📄 License & Attribution

Based on the project from Jonas Schmedtmann's The Complete JavaScript Course. The JavaScript DOM logic (script.js) was personally implemented by Arian Ahmadi (AlefAhmadi).