نافذة حوارية

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

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

وانتبه إلى أنّ show() تختلف عن showModal()، فالأولى تفتح نافذة عادية لا تحبس التركيز ولا تُظهر خلفية ولا تُغلق بـ Escape، والخلط بينهما أكثر خطأ يقع فيه من يستعمل هذا الوسم.

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

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