مربع الحوار المشروط هو نوع خاص من المربعات المنبثقة التي تقاطع المستخدم على صفحة ويب. على الرغم من وجود بعض حالات الاستخدام الصالحة لعرض مربّع حوار، يجب التفكير مليًا قبل إضافة أحدها. تجبر مربعات الحوار المشروطة المستخدمين على التركيز على محتوى معين وتجاهل بقية الصفحة مؤقتًا.
يمكن أن تكون مربّعات الحوار:
- مشروط: يمكن للمستخدمين التفاعل مع المحتوى داخل مربّع الحوار فقط. يتم عرض مربّعات الحوار المشروطة في أعلى محتوى الصفحة. يتم ضبط الصفحة على 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(). يطابق هذا العنصر الزائف جميع الخلفيات، بما في ذلك الخلفية التي تظهر عند استخدام FullScreen API، مثلاً عند مشاهدة فيديو في وضع ملء الشاشة لا يتضمّن نسبة العرض إلى الارتفاع نفسها التي تتضمّنها الشاشة.
مربّعات الحوار غير المشروطة
يفتح العنصر HTMLDialogElement.show() مربّع حوار أيضًا، ولكن بدون إضافة
خلفية أو جعل أي عنصر غير نشط. يؤدي مفتاح الهروب إلى إغلاق مربعات الحوار
النمطية فقط، وليس مربعات الحوار غير النمطية. لهذا السبب، من المهم تضمين طريقة لإغلاق مربّع الحوار غير المشروط. إذا كان خيار الإغلاق خارج مربع الحوار، فسيعود التركيز إلى العنصر الذي فتح مربع الحوار. هذه تجربة مستخدم غير مثالية.
على الرغم من أنّ زر إغلاق مربّع الحوار ليس مطلوبًا رسميًا في المواصفات، يُرجى اعتباره مطلوبًا. يؤدي الزر المرئي الذي يمكن التركيز عليه إلى تحسين أدوات تسهيل الاستخدام وتجربة المستخدم.
إغلاق مربّع حوار
لا تحتاج إلى طريقة HTMLDialogElement.close() لإغلاق مربّع حوار. لا تحتاج إلى JavaScript على الإطلاق. لإغلاق عنصر <dialog> بدون استخدام JavaScript،
يمكنك تضمين نموذج باستخدام طريقة مربّع الحوار من خلال ضبط method="dialog" على
<form> أو formmethod="dialog" على الزر.
عندما يرسل المستخدم نموذجًا باستخدام طريقة dialog، يتم الاحتفاظ بحالة البيانات التي أدخلها المستخدم. While there is a submit event, the form goes through constraint
validation (unless novalidate is set). لم يتم محو بيانات المستخدم أو إرسالها. يمكنك إنشاء زر إغلاق بدون 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::backdropbackground