مربع حوار

عنصر الحوار هو عنصر مفيد لتمثيل أي نوع من الحوارات في HTML، تعرَّف على طريقة عمله.

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

يمكن أن تكون مربّعات الحوار مشروطة (لا يمكن التفاعل إلا مع المحتوى الموجود في مربّع الحوار) أو غير مشروطة (يظل من الممكن التفاعل مع المحتوى خارج مربّع الحوار). يتم عرض مربّعات الحوار النموذجية فوق بقية محتوى الصفحة. بقية الصفحة غير نشطة، ويتم حجبها تلقائيًا بخلفية شبه شفافة.

يأتي عنصر <dialog> الدلالي في HTML لإنشاء مربّع حوار مع دلالات وتفاعلات لوحة المفاتيح وجميع خصائص وطرُق واجهة 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() مربّع حوار بشكل مشابه، ولكن بدون إضافة خلفية أو التسبّب في عدم نشاط أي شيء. لا يؤدي الضغط على مفتاح Escape إلى إغلاق مربّعات الحوار غير المشروطة. لهذا السبب، من المهم جدًا تضمين طريقة لإغلاق مربّع الحوار غير المشروط. في حال كان زر الإغلاق خارج مربّع الحوار، يجب الانتباه إلى أنّ التركيز سينتقل إلى العنصر الذي فتح مربّع الحوار، ما قد لا يقدّم أفضل تجربة للمستخدم.

مع أنّ المواصفات لا تشترط رسميًا توفّر زر لإغلاق مربّع الحوار، ننصحك بتضمينه. سيؤدي الضغط على مفتاح 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() يمكن أن يساعد في ضمان توفّر مربّع الحوار حتى في حال عدم توفّر JavaScript.

تفاصيل إضافية

عدم استخدام 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
باستخدام السمة background
باستخدام العنصر الصوري ::backdrop