تعد مربعات الحوار (المعروفة أيضًا باسم المربعات المشروطة والطبقات العائمة) جزءًا مهمًا من تفاعل المستخدم في مشاريع الويب. وأكثرها شيوعًا هي التنبيه () والتأكيد () في js. ومع ذلك، فإن مربع الحوار هذا ليس جميلًا ولا يمكن أن يكون كذلك يتم تخصيص النمط، لذلك أثناء عملية التطوير، نقوم عمومًا ببناء العجلات وفقًا لاحتياجاتنا الخاصة أو نستخدم عجلات خارجية.
تكوين مربع الحوارالأشكال الشائعة للمربعات المنبثقة:
الموضع: الزاوية اليسرى العليا من الشاشة، الزاوية اليمنى العليا، الزاوية اليسرى السفلية، الزاوية اليمنى السفلية، المركز الرأسي، إلخ.
الحجم: عرض ثابت وارتفاع ثابت، عرض ثابت وارتفاع ثابت، عرض متغير وارتفاع ثابت، إلخ.
نموذج الحوار قيد التطوير هو عبارة عن مزيج عشوائي من الموضع والحجم.
ومع ذلك، هناك موقف واحد (توسيط عمودي مع عرض وارتفاع متغير) ليس من السهل تنفيذه (يمكنك استخدام العرض: الجدول أو ترجمة أو مرونة CSS3 لتحقيق ذلك). .
يحتوي مربع الحوار أعلاه على حاوية للمحتوى، كما توجد طبقة قناع (قناع) أسفل مربع الحوار. طبقة القناع هي طبقة فاصلة بين مربع الحوار ونص الصفحة التي يتم تشكيلها بعد قيام المستخدم بتشغيل المربع المنبثق وجودها يمكن أن يمنح المستخدمين تأثيرًا مرئيًا أكثر وضوحًا، وفي الوقت نفسه يتجنب العمليات الرئيسية الأخرى غير الضرورية للصفحة بعد قيام المستخدمين بتشغيل مربع الحوار، وبالتالي توفير تجربة مستخدم أفضل.
هناك مشكلةعلى الرغم من وجود العديد من عجلات الحوار التي يمكننا الاختيار من بينها، إلا أننا نواجه مشكلات مختلفة.
إذن، هل هناك طريقة بسيطة لإنشاء مربع حوار؟ بالطبع، يمكننا استخدام عنصر الحوار HTML5.
HTML5 (الحوار)
<dialog open> <h2>مرحبًا بالعالم.</h2></dialog>
الأمر بسيط جدًا. يمكننا استخدام الكود أعلاه لإنشاء مربع حوار ينبثق بالمحتوى "Hello World".
من السهل أيضًا التحكم في عرض/إخفاء مربع الحوار. قم بإضافة السمة المفتوحة لعرضها وإزالتها لإخفائها. بالطبع، يمكننا أيضًا التحكم في عرض وإخفاء مربع الحوار من خلال واجهة DOM (إظهار ()، إغلاق ())
بالنسبة لطبقة القناع الموجودة أسفل مربع الحوار، يمكننا استخدام العنصر الزائف ::backgrop، ولتنشيطه، نحتاج إلى استخدام showModal() DOM API. ما يميز ::backgrop هو أن موضعه أسفل مربع الحوار ، في أي مؤشر z أعلاه.
لا يمكن أن يؤدي استخدام showModal() إلى عرض طبقة القناع فحسب، بل يمكن أيضًا عرض حاوية الحوار، لذا عند استخدام ::backdrop، يمكنك استخدام showModal() بدلاً من show() API إذا ضغطت على المفتاح ESC على لوحة المفاتيح، فسيظهر سيتم إغلاق الطبقة المنبثقة بالطبع، يمكنك استخدام واجهة برمجة التطبيقات ()DOM API.
يمكننا ضبط طبقة ::الخلفية لتكون طبقة شبه شفافة، ويكون الكود كما يلي:
الحوار :: الخلفية { لون الخلفية: rgba (0، 0، 0، 0.75)؛}بالإضافة إلى الطبقات المنبثقة الشائعة التي تحتوي على معلومات سريعة، هناك أيضًا طبقة منبثقة ذات نموذج أكثر استخدامًا.
طبقة منبثقة مع النموذجهل يمكننا استخدام عنصر حوار HTML5 مع عنصر النموذج لإنشاء هذه الطبقات المنبثقة؟
الجواب: نعم
كيف يمكننا الجمع بين عنصر النموذج وعنصر الحوار بشكل وثيق؟
الإجابة: نحتاج فقط إلى إضافة سمة الطريقة = الحوار إلى عنصر الحوار، بحيث يمكن تمرير قيمة قيمة السمة لعنصر الزر إلى عنصر الحوار.
<dialog> <form Method=dialog> <p>تأكيد أو إلغاء</p> <button type=submit value=yes>تأكيد</button> <button type=submit value=no>إلغاء</button> </form </dialog><script> var حوار = document.querySelector('dialog') الحوار.showModal() حوار.addEventListener('إغلاق', وظيفة(حدث) { console.log(dialog.returnValue) })</script>تجريبي
توافق المتصفحعلى الرغم من أن HTML5 سهل الاستخدام نسبيًا، إلا أنه لا تزال هناك مشكلات في التوافق. وهي ميزة تجريبية في Firefox، ولكنها غير مدعومة في IE وEdge وSafari بواسطة iOS ويدعمه Android أيضًا، وهو ليس جيدًا بدرجة كافية ولا يدعمه إلا Android 6 والإصدارات الأحدث. لمزيد من التفاصيل، يرجى الرجوع إلى caniuse
إذًا، هل يمكن للإصدارات الأقدم من المتصفحات دعم مربع حوار HTML5؟ بادئ ذي بدء، ما نفكر فيه هو ما إذا كان هناك polyfill يدعم الحوار، تمامًا مثل babel-polyfill الذي يدعم الميزات الجديدة لـ es6. يوجد بالفعل مشروع مفتوح المصدر a11y-dialog، والذي يوفر إصدارات مختلفة من vue و تتفاعل على التوالي.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.