تعد مربعات الحوار والوسائط جزءًا لا يتجزأ من معظم تطبيقات الويب. في حين أن بنائها يدويًا ليس مهمة معقدة ، إلا أنها سرعان ما تصبح مملة لأي مطور ويب. البديل المعتاد لبناءها يدويًا هو استخدام مكون تم إنشاؤه بواسطة شخص آخر.

ومع ذلك ، هناك مشكلتان في هذا النهج. هناك العديد من الخيارات ، ويصبح من الصعب معرفة المكون الأفضل للاستخدام ، و قد يكون تخصيص مظهر مثل هذه المكونات أحيانًا شاقًا مثل بناء مربع حوار باليد. لحسن الحظ ، هناك بديل آخر: عنصر حوار HTML.

ما هو عنصر الحوار؟

عنصر حوار HTML هو علامة HTML مضمنة (مثل div أو span) ، والتي تسمح للمطورين بإنشاء مربعات حوار وشروط مخصصة. كان عنصر الحوار موجودًا في Chrome و Opera منذ عام 2014 ، ولكنه أصبح مدعومًا مؤخرًا فقط من قبل جميع المتصفحات الرئيسية.

لماذا نستخدم عنصر الحوار؟

السبب الرئيسي لاستخدام عنصر الحوار هو الراحة. إنه يجعل من السهل إنشاء مربعات حوار يمكن أن تظهر مضمنة أو تظهر كشروط ، مع ما لا يزيد عن علامة HTML واحدة وبضعة أسطر من JavaScript.

يزيل عنصر الحوار الحاجة إلى إنشاء مربع حوار مخصص وتصحيحه ، أو استيراد مكون شخص آخر. كما أنه من السهل جدًا تصميمه باستخدام CSS.

instagram viewer

دعم المستعرض لعنصر الحوار

لسوء الحظ ، قد يكون دعم المتصفح لعنصر الحوار أفضل. إنه مدعوم في أحدث الإصدارات من جميع المتصفحات الرئيسية اعتبارًا من مارس 2022 ، مع بعض التحذيرات.

لن يدعم أي متصفح Firefox أقدم من Firefox 98 إلا إذا تم تمكينه يدويًا في إعدادات المتصفح ، وأي إصدار من Safari أقدم من Safari 15.4 لا يدعمه على الإطلاق. تتوفر تفاصيل دعم المتصفح الكامل على هل يمكنني استخدام.

لحسن الحظ ، هذا لا يعني أن عنصر الحوار غير قابل للاستخدام. يحتفظ فريق Google Chrome بتعويض يمكنك العثور عليه جيثب لعنصر الحوار الذي يوفر الدعم له حتى على المتصفحات حيث لا يتم دعمه أصلاً.

في شكله الحالي ، يمكن أن يكون لعنصر الحوار مشكلات تتعلق بإمكانية الوصول ، لذلك قد يكون من الأنسب استخدام مكون حوار مخصص مثل a11y- الحوار في تطبيقات الإنتاج.

كيفية استخدام عنصر الحوار

لتوضيح كيفية استخدام عنصر الحوار ، ستستخدمه لإنشاء ميزة شائعة لموقع الويب: نموذج تأكيد لزر حذف.

كل ما هو مطلوب للمتابعة هو ملف HTML واحد.

1. قم بإعداد ملف HTML

ابدأ بإنشاء الملف المذكور وتسميته index.html.

بعد ذلك ، قم بإنشاء بنية ملف HTML وقدم بعض المعلومات الوصفية الأساسية حول الصفحة ، بحيث يتم عرضها بشكل صحيح على جميع الأجهزة.

اكتب الكود التالي في index.html:

<! DOCTYPE html>
<أتش تي أم أل لانج ="en">
<رأس>
<meta charset ="UTF-8">
<meta http-equiv ="متوافق مع X-UA" المحتوى ="IE = حافة">
<اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1.0">
<لقب>عرض الحوار</title>
</head>
<نمط></style>


<هيئة></body>
<النصي></script>
</html>

هذا كل ما هو ضروري لهذا المشروع.

2. كتابة الترميز

بعد ذلك ، اكتب ترميز زر الحذف ، وكذلك عنصر الحوار.

اكتب الكود التالي في علامة نصوص index.html:

<فئة div ="زر الحاوية">
<زر>
حذف العنصر
</button>
</div>
<الحوار>
<شعبة>
 هل أنت متأكد من أنك تريد حذفهذه العنصر؟
</div>
<شعبة>
<فئة زر ="أغلق">
 نعم
</button>
<فئة زر ="أغلق">
 رقم
</button>
</div>
</dialog>

سيقوم HTML أعلاه بإنشاء:

  • زر حذف.
  • عنصر الحوار.
  • زرين داخل مربع الحوار.

إذا كان index.html مفتوحًا في متصفحك ، فسيكون زر الحذف هو العنصر الوحيد المرئي على الشاشة. هذا لا يعني أن هناك خطأ ما ، فالعنصر الحوار يتطلب القليل من جافا سكريبت ليصبح مرئيًا.

3. مضيفا جافا سكريبت

الآن ، اكتب الكود الذي سيفتح مربع الحوار عندما ينقر المستخدم على زر الحذف ، وكذلك الرمز للسماح بإغلاق مربع الحوار.

اكتب ما يلي في علامة البرنامج النصي الخاصة بـ index.html:

مقدار ثابت مشروط = وثيقة.querySelector ("مربع حوار")
document.querySelector ("زر حاوية") .addEventListener ("انقر", () => {
مشروط.showModal();
});
مقدار ثابت closeBtns = وثيقة.getElementsByClassName ("close") ؛
لـ (btn من closeBtns) {
 btn.addEventListener ("انقر", () => {
مشروط.أغلق();
 })
}

هذا الرمز يستخدم طريقة querySelector للحصول على إشارات إلى الأزرار ومربع الحوار. ثم يقوم بإرفاق مستمع حدث النقر بكل زر.

قد تكون على دراية مستمعي الأحداث في JavaScript ، والتي يمكنك استخدامها بنفسك. يستدعي مستمع الحدث المرفق بزر الحذف طريقة showModal () لعرض مربع الحوار عند النقر فوق الزر.

يحتوي كل زر داخل النموذج على مستمع حدث مرفق به يستخدم طريقة close () لإخفاء مربع الحوار عند النقر فوقه.

حتى إذا لم يكن هناك JavaScript يستدعي طريقة close () في الكود ، يمكن للمستخدمين أيضًا إغلاق النموذج عن طريق الضغط على مفتاح escape في لوحة المفاتيح الخاصة بهم.

الآن وقد تم وضع JavaScript هذا في مكانه ، إذا نقر المستخدم على زر الحذف ، فسيتم فتح النموذج ، وسيؤدي النقر فوق الزر "نعم" أو "لا" إلى إغلاق النموذج.

هذا ما يجب أن يبدو عليه الشكل المفتوح:

تجدر الإشارة إلى أن عنصر الحوار يأتي بالفعل مع بعض الأنماط ، على الرغم من عدم وجود CSS في index.html. تم توسيط النموذج بالفعل ، وله حد ، والعرض مقيد بالمحتوى ، وله بعض الحشو الافتراضي.

لا يمكن للمستخدمين التفاعل (النقر ، التحديد) مع أي شيء في الخلفية أثناء فتح النموذج.

يمكن لعنصر الحوار أيضًا عرض نفسه كجزء من تدفق الصفحة بدلاً من عرضه كشرطي. لتجربتها ، قم بتغيير مستمع الحدث الأول في JavaScript كما يلي:

document.querySelector ("زر حاوية") .addEventListener ("انقر", () => {modal.show () ، });

الشيء الوحيد الذي تغير في هذا الكود هو أن الكود يستدعي طريقة show () ، بدلاً من طريقة showModal (). الآن ، عندما ينقر المستخدم على زر حذف العنصر ، يجب أن يفتح النموذج بشكل مضمن مثل هذا:

4. أضف التصميم

بعد ذلك ، قم بتخصيص مظهر مربع الحوار وخلفيته عن طريق كتابة CSS.

سيقلل CSS من حدود مربع الحوار ، ويحد من عرضه الأقصى ، ثم يغمق الخلفية ، بالإضافة إلى إضافة القليل من التصميم إلى الأزرار.

يعد تصميم مربع الحوار نفسه بسيطًا ، لكن فئة الخلفية الزائفة ضرورية لإضافة تصميم يستهدف خلفية مربع الحوار.

قم بلصق التعليمة البرمجية التالية في علامة النمط الخاصة بـ index.html:

الحوار:: خلفية {
 الخلفية: أسود ؛
العتامة: 0.5;
}
زر {
 نصف قطر الحدود: 2 بكسل ؛
 لون الخلفية: أبيض؛
 الحدود: 1 بكسل أسود خالص ؛
 الهامش: 5 بكسل ؛
 مربع الظل: 1 بكسل 1 بكسل 2 بكسل رمادي ؛
}
مربع حوار {
 أقصى عرض: 90vw ؛
 الحدود: 1 بكسل أسود خالص ؛
}

عندما يكون مربع الحوار مفتوحًا ، يجب أن يبدو الآن كما يلي:

وقمت ببناء حوار كامل الوظائف.

يعد عنصر الحوار طريقة رائعة لبناء النماذج

باستخدام عنصر حوار HTML الذي حصل مؤخرًا على دعم في جميع المتصفحات الرئيسية ، يمكن لمطوري الويب الآن إنشاء وظائف كاملة ، نماذج ومربعات حوار قابلة للتخصيص بسهولة مع علامة HTML واحدة وبضعة أسطر من JavaScript ودون الحاجة إلى الاعتماد على طرف ثالث المحلول.

يحتوي عنصر الحوار على polyfill يحتفظ به فريق Google Chrome ، والذي يسمح للمطورين باستخدام مربع الحوار في إصدارات المستعرض التي لا تدعمه.