مربع حوار

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

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

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

عنصر 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(). يتطابق هذا العنصر الزائف مع جميع الخلفيات، بما في ذلك الخلفية التي يتم عرضها عند استخدام FullScreen API، مثل مشاهدة فيديو في وضع ملء الشاشة لا يتضمّن نسبة العرض إلى الارتفاع نفسها التي تتضمّنها الشاشة أو الشاشة المتّصلة.

مربّعات الحوار غير المشروطة

يفتح الرمز 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

يُرجى إعادة المحاولة.

باستخدام العنصر الصوري ::backdrop

إجابة صحيحة.

باستخدام السمة background

يُرجى إعادة المحاولة.