الدرس 2 من 8

نافذة حوارية

هدف الدرس

التركيز لا يهرب

01

الشرح

أكثر النوافذ المخصّصة معطوبة: يفتحها المستخدم فيبقى التركيز خلفها، ويضغط Tab فيتنقّل في صفحة لا يراها.

وسم <dialog> يحلّ هذا كلّه بلا سطر: showModal() يحبس التركيز داخله، ويجعل ما خلفه غير قابل للوصول، ويغلق بـ Escape، ويُعيد التركيز إلى ما كان عليه عند الإغلاق. لا تكتب ذلك بيدك — الوسم يفعله.

وshow() ليست showModal(): الأولى تفتح نافذة عادية بلا حبس ولا خلفية ولا Escape. الخلط بينهما أكثر خطأ في هذا الوسم.

وما يبقى عليك اثنان: انقل التركيز إلى عنصر مفيد داخلها بعد الفتح، واستمع لحدث close — فهو يقع من الزرّ ومن Escape معًا، فتكتب ردّك مرّة واحدة بدل مرّتين.

ملاحظة على التصحيح: إطار المعاينة معزول أمنيًّا، وحدث close لا يصل داخله. فالفحص هنا يقيس ما يظهر أثره: نوع الفتح، والتركيز، والإغلاق، والخلفية. أما مستمع close فاكتبه — هو الصواب، وستحتاجه في صفحة حقيقية.

02

المطلوب

افتحها بـ showModal()، انقل التركيز داخلها، ونسّق الخلفية بـ ::backdrop.

معايير التصحيح

7 معايير
  1. النافذة مغلقة ابتداءً
  2. الضغط يفتحها كنافذة حاجزة
  3. التركيز انتقل إلى داخلها
  4. زرّ الإغلاق يغلقها
  5. الفتح يُعلَن في السجلّ
  6. الخلفية منسّقة بـ ::backdrop
  7. إعادة الفتح والإغلاق تعمل مرارًا
03

تلميحات

0/3
منهج المقرّرأنجزت 0 من 8

مكوّنات تبنيها من الصفر وتجدها في كل واجهة: ألسنة ونوافذ وجداول وإشعارات وعارض شرائح.

متقدّم · 8 دروس · ساعتان

index.html
المعاينة
index.html100%
–/7

اضغط «تشغيل» ليبدأ الفحص.

7 معايير في بطاقة «المطلوب».

منهج المقرّرأنجزت 0 من 8

مكوّنات تبنيها من الصفر وتجدها في كل واجهة: ألسنة ونوافذ وجداول وإشعارات وعارض شرائح.

متقدّم · 8 دروس · ساعتان