مربّع حوار

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

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

عنصر 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 غير مكتسَبة.

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

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