مربّع حوار

يعد عنصر مربع الحوار عنصرًا مفيدًا لتمثيل أي نوع من الحوار في 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.

التحقّق من فهمك

اختبر معلوماتك حول عنصر مربع الحوار.