مربع الحوار المشروط هو نوع خاص من المربعات المنبثقة على صفحة الويب: نافذة منبثقة تقاطع المستخدم للتركيز على نفسه. هناك بعض حالات الاستخدام الصالحة لعرض مربّع حوار، ولكن يجب التفكير جيدًا قبل إجراء ذلك، لأنّ مربّعات الحوار المشروطة تجبر المستخدمين على التركيز على محتوى معيّن، وتتجاهل بقية أقسام الصفحة مؤقتًا على الأقل.
يمكن أن تكون مربعات الحوار إما نمطية (يمكن التفاعل فقط مع المحتوى الموجود في مربع الحوار) أو غير مشروطة (لا يزال من الممكن التفاعل مع محتوى خارج مربع الحوار). تظهر مربّعات الحوار المشروطة فوق بقية محتوى الصفحة. ويكون باقي الصفحة inert ويتم حجبها تلقائيًا بخلفية شبه شفافة.
يتضمّن عنصر HTML الدلالي <dialog> لإنشاء مربّع حوار دلالات الألفاظ وتفاعلات لوحة المفاتيح وجميع خصائص وأساليب واجهة HTMLDialogElement.
مربّعات الحوار المشروطة
في ما يلي مثال على <dialog> المشروطة. افتح مربّع الحوار الذي يتضمّن الزرّ "فتح مربّع الحوار المشروط". بعد فتح مربّع الحوار، تتوفّر ثلاث طرق لإغلاق مربّع الحوار: مفتاح Escape، وإرسال نموذج باستخدام
زر يتضمّن مجموعة formmethod="dialog" (أو إذا كان النموذج نفسه يحتوي على مجموعة method="dialog")، وطريقة HTMLDialogElement.close().
تتضمن HTMLDialogElement ثلاث طرق رئيسية، إلى جانب جميع الطرق المكتسَبة من HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
بما أنّه تم فتح <dialog> باستخدام الإجراء HTMLDialogElement.showModal()، فهو عبارة عن مربّع حوار نمطي. يؤدي فتح مربّع حوار نمطي إلى إيقاف وإخفاء كل العناصر باستثناء مربّع الحوار نفسه. إذا مرّرت المؤشر فوق واجهة المستخدم خارج مربّع الحوار، ستلاحظ أنّ جميع العناصر تتصرف كما لو تم ضبط pointer-events: none;، حتى الزر الذي يفتح مربّع الحوار لا يتفاعل مع التفاعلات.
عند فتح مربّع الحوار، يتم نقل التركيز إلى مربّع الحوار. يتم ضبط التركيز على العنصر الأول في الترتيب التسلسلي للتنقل بلوحة المفاتيح ضِمن مربّع الحوار هذا.
إذا ضغطت على المفتاح tab بشكل متكرر، فستلاحظ أنه لا يمكن التركيز إلا على المحتوى الموجود داخل مربع الحوار عندما يكون مربع الحوار المشروط مفتوحًا. يكون كل شيء خارج مربّع الحوار المشروط غير مفعَّل طالما أنّ مربّع الحوار مفتوح.
عند إغلاق مربع حوار، سواء كان مشروطًا أم لا، يتم إرجاع التركيز إلى العنصر الذي فتح مربع الحوار. إذا فتحت مربع حوار آليًا لا يستند إلى إجراء المستخدم، فأعد النظر. إذا لزم الأمر، تأكد من إعادة التركيز إلى حيث كان قبل فتح مربع الحوار، خاصة إذا أغلق المستخدم مربع الحوار دون التفاعل معه.
هناك سمة inert عامة يمكن استخدامها لإيقاف عنصر وكل عناصره التابعة، باستثناء أي مربّع حوار
نشط. وعند فتح مربّع حوار نمطي باستخدام showModal()، تصبح حالة عدم التفعيل أو الإيقاف مجانية ولا يتم ضبط السمة بشكل صريح.
يمكن اختيار نمط من الخلفية التي تحجب كل شيء ما عدا مربّع الحوار باستخدام العنصر الزائف ::backdrop. لا يتم عرض الصور الخلفية إلا عند عرض <dialog> باستخدام طريقة .showModal(). يتطابق هذا العنصر الزائف مع جميع الخلفيات، بما في ذلك الصورة التي يتم عرضها عند استخدام واجهة برمجة التطبيقات بملء الشاشة،
كما هو الحال عند مشاهدة فيديو في وضع ملء الشاشة، والذي لا يكون له نسبة العرض إلى الارتفاع نفسها في الشاشة أو الشاشة.
مربّعات الحوار غير المشروطة
بالمثل، يفتح HTMLDialogElement.show() مربع حوار، ولكن بدون إضافة صورة خلفية أو التسبب في عدم عمل أي شيء.
لا يغلق مفتاح Esc مربعات الحوار غير المشروطة. لهذا السبب، من المهم التأكد من تضمين طريقة
لإغلاق مربع الحوار غير المشروط. عند إجراء ذلك، إذا اقتربنا أكثر من مربع الحوار، أدرك أن التركيز سينتقل إلى العنصر الذي فتح مربع الحوار، والذي قد لا يكون أفضل تجربة للمستخدم.
على الرغم من أن زر إغلاق مربع الحوار غير مطلوب رسميًا حسب المواصفات، اعتبره مطلوبًا. سيغلق مفتاح Escape مربع حوار مشروط، ولكنه ليس مربع حوار غير مشروط. يعمل الزر المرئي القادر على التركيز على تحسين إمكانية الوصول وتجربة المستخدم.
إغلاق مربع حوار
لست بحاجة إلى طريقة HTMLDialogElement.close() لإغلاق مربّع الحوار. لا تحتاج إلى JavaScript على الإطلاق. لإغلاق <dialog>
بدون JavaScript، يمكنك تضمين نموذج يتضمّن طريقة مربّع حوار عن طريق ضبط method="dialog" على <form> أو formmethod="dialog"
على الزر.
عندما يرسل المستخدِم البيانات باستخدام طريقة dialog، يتم الاحتفاظ بحالة البيانات التي يُدخلها المستخدم. في حين يوجد حدث إرسال - يخضع النموذج
للتحقق من صحة القيود (ما لم يتم ضبط novalidate) - لا يتم محو بيانات المستخدم أو إرسالها.
يمكن كتابة زر الإغلاق بدون JavaScript على النحو التالي:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
ربما لاحظت أنه تم تعيين السمة autofocus
عند إغلاق <button> في هذا المثال. العناصر التي تم ضبط السمة autofocus فيها ضمن <dialog> لن يتم التركيز عليها عند تحميل الصفحة (ما لم يتم تحميل الصفحة ويظهر مربّع الحوار). ومع ذلك، سيتم التركيز عليه عند فتح مربع الحوار.
عند فتح مربّع حوار، سيتم تلقائيًا التركيز على أول عنصر يمكن التركيز عليه داخل مربّع الحوار ما لم يتم ضبط السمة autofocus لعنصر آخر داخل مربّع الحوار. ويؤدي ضبط السمة autofocus على زر الإغلاق إلى ضمان التركيز على التركيز عند فتح مربّع الحوار. إنّ تضمين autofocus في <dialog> يجب ألا يتم إلا بالكثير من الاهتمام. جميع العناصر في التسلسل الواردة قبل تخطي العنصر الذي يتم التركيز عليه تلقائيًا.
وسنناقش هذه السمة بمزيد من التفصيل في الدرس الذي يتم التركيز عليه.
تتضمن واجهة HTMLDialogElement سمة returnValue. إنّ إرسال نموذج باستخدام method="dialog" يؤدي إلى ضبط السمة returnValue على name، إن توفّرت، على زر الإرسال المستخدَم لإرسال النموذج. لو كتبنا <button type="submit" name="toasty">close</button>، لكان returnValue toasty.
عند فتح مربّع حوار، تتوفّر السمة open المنطقية،
أي أنّ مربّع الحوار نشط ويمكن التفاعل معه. وعند فتح مربّع حوار عن طريق إضافة السمة open بدلاً من
السمة .show() أو .showModal()، سيكون مربّع الحوار أقل شكلاً. تعرض السمة HTMLDialogElement.open
true أو false، استنادًا إلى ما إذا كان مربّع الحوار متاحًا للتفاعل، وليس ما إذا كان نمطيًا أم لا.
إنّ لغة JavaScript هي الطريقة المفضّلة لفتح مربّع الحوار، بما في ذلك السمة open عند تحميل الصفحة ثم إزالتها باستخدام .close()، ولكن هذه السمة تساعد في ضمان توفُّر مربّع الحوار حتى في حال عدم توفّره.
تفاصيل إضافية
عدم استخدام "tabindex"
يمكن للعنصر الذي يتم تنشيطه لفتح مربع الحوار وزر الإغلاق الموجود فيه (وربما محتوى آخر) التركيز والتفاعل. العنصر <dialog> غير تفاعلي ولا يتم التركيز عليه. لا تضِف السمة tabindex
إلى مربّع الحوار نفسه.
أدوار ARIA
الدور الضمني هو dialog. إذا كان مربّع الحوار
نافذة تأكيد تنقل رسالة مهمة تتطلّب تأكيدًا أو ردًا من المستخدم الآخر، اضبط العلامة role="alertdialog".
يجب أن يحتوي مربع الحوار أيضًا على اسم يمكن الوصول إليه. إذا كان من الممكن أن يوفر النص المرئي الاسم الذي يمكن الوصول إليه، أضِف aria-labelledby="idOfLabelingText".
الإعدادات التلقائية لخدمة مقارنة الأسعار (CSS)
تجدر الإشارة إلى أنّ المتصفّحات توفّر النمط التلقائي للسمة dialog. يضبط Firefox وChrome وEdge على color: CanvasText; background-color: Canvas;
ويضبط Safari color: black; background-color: white; في أوراق أنماط وكيل المستخدم الخاصة بهم. تم اكتساب color من dialog وليس من body أو :root، وهو ما قد يكون غير متوقع. لم يتم اكتساب السمة background-color.
التحقّق من استيعابك
اختبر معلوماتك عن عنصر مربع الحوار.
كيف يمكنك تصميم المنطقة خلف مربع الحوار؟
::background.::backdrop.background.