تنسيق النوافذ المنبثقة ومربعات الحوار

يوفر عنصر HTML <dialog> سلوكًا مدمجًا للنوافذ الحوارية المنبثقة: حصر التركيز، والإغلاق عند الضغط على Escape، وواجهة showModal() / close(). نسّقه باستخدام CSS بدلًا من بناء هيكل مخصص للنوافذ المنبثقة من الصفر.

ينسّق العنصر الزائف ::backdrop الطبقة التراكبية خلف عنصر <dialog> المفتوح. طبّق خلفية شبه شفافة: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. لا حاجة إلى div تغليف.

وسّط النوافذ الحوارية باستخدام CSS: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. يؤدي استخدام margin: auto في عنصر dialog إلى وضعه في وسط إطار العرض من دون تحديد موضعه باستخدام JavaScript.

اضبط overflow-y: auto في النافذة الحوارية نفسها لمعالجة المحتوى الطويل. واضبط overflow: hidden في body عند فتح النافذة المنبثقة لمنع تمرير الخلفية، وذلك بإضافة فئة وإزالتها باستخدام JavaScript لتبديل هذا السلوك.

حرّك دخول النافذة الحوارية باستخدام @starting-style (Chrome 117+) لإنشاء حركات دخول تعتمد على CSS فقط من دون JavaScript. ولتوفير دعم أوسع، أضف فئة open باستخدام JavaScript واستخدم transition على transform وopacity: يبدأ slide-up من translateY(20px) إلى translateY(0).

تحريك إغلاق النافذة الحوارية معقد، إذ تُخفى النافذة فورًا عند استدعاء close(). تتمثل الحلول في استخدام Popover API، الذي يدعم حركات الإغلاق أصلًا، أو اعتراض الإغلاق باستخدام JavaScript، وتشغيل فئة حركة الخروج، ثم استدعاء close() بعد انتهاء الحركة.

تُفتح النوافذ الحوارية فوق كل محتوى الصفحة الآخر. تجنب صراعات z-index باستخدام سياق التكديس الأصلي لعنصر dialog، إذ يُعرض في الطبقة العليا فوق جميع قيم CSS الخاصة بـ z-index من دون الحاجة إلى ضبط z-index على عنصر dialog نفسه.

على الأجهزة المحمولة، حرّك النوافذ الحوارية من الأسفل كلوحة سفلية: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. وعلى أجهزة سطح المكتب، وسّطها كنافذة منبثقة تقليدية باستخدام نمط margin: auto.

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

أضف aria-labelledby للإشارة إلى عنوان النافذة الحوارية، وأضف aria-describedby للإشارة إلى وصفها. يكون دور النافذة الحوارية ضمنيًا في <dialog>. يعلن قارئو الشاشة هذه التسميات عند انتقال التركيز إلى النافذة الحوارية.

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

ما ميزة استخدام عنصر <dialog> الأصلي مقارنة بنافذة منبثقة مخصصة مبنية على div؟

يوفر عنصر dialog الأصلي، مع ::backdrop، والتوسيط باستخدام margin: auto، والتحكم في التجاوز، وحركات CSS للدخول، وإدارة التركيز، نمطًا متكاملًا للنوافذ المنبثقة يعتمد على CSS ويسهل الوصول إليه. ويكتمل مكوّن النافذة الحوارية الجاهز للإنتاج بتخطيطات اللوحة المتجاوبة على الأجهزة المحمولة وسمات ARIA المناسبة.