modal window

تطوير نافذة منبثقة (Modal Window) باستخدام HTML وCSS وJavaScript، حيث يتم استخدام التلاعب بـ DOM لعرض النافذة وإخفائها بطريقة تفاعلية وسلسة.

المهام:

تصميم هيكل HTML للنافذة والأزرار.

تنسيق النافذة والخلفية باستخدام CSS مع تأثيرات انتقالية.

استخدام JavaScript للتفاعل مع المستخدم:

فتح النافذة عند الضغط على زر.

إغلاق النافذة عند الضغط على زر الإغلاق، خارج النافذة، أو عند الضغط على زر Escape.

التعامل مع DOM باستخدام:

querySelector()

classList.add/remove/togg...

addEventListener()

الهدف:

تحسين تجربة المستخدم من خلال إنشاء نافذة منبثقة تظهر فوق محتوى الصفحة بشكل جذاب وسهل الاستخدام، مع التركيز على الأداء والتفاعل.