إنشاء حوار HTML5 أصلي في Windows

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

في السابق ، كان إنشاء نافذة حوار يتطلب منك استخدام مكون إضافي لـ jQuery مثل Pop Easy أو jQuery UI Dialog أو Twitter Bootstrap Modal. ولكن الآن مع إدخال عنصر <dialog> الجديد في HTML5 ، أصبح من السهل جدًا على المطورين إنشاء مربعات حوار منبثقة وشروط على صفحة ويب.

في البداية ، دخلت العلامة <dialog> في مواصفات HTML5 كحل رائع لترميز المحادثات ، ولكنها تم حذفها من مواصفات HTML5 مرة أخرى في عام 2009. ومع ذلك ، فقد عادت مرة أخرى في شكل جديد.

في هذا المنشور ، سوف أطلعك على عنصر <dialog> وأظهر كيف يمكنك تحقيق أقصى استفادة منه. هيا نبدأ!

إذا كنت تريد رؤية عنصر <dialog> أثناء العمل أو التلاعب بالكود ، فقم بعرض العرض التوضيحي المباشر هنا.

دعم المستعرض لعنصر <dialog>

للأسف ، دعم المتصفح لـ <dialog> محدود في الوقت الحالي. العنصر مدعوم حاليًا فقط في Safari 6.0 و Chrome Canary. على الرغم من أن Chrome Canary يدعم العلامة تمامًا ، يجب عليك تمكين علامة لاستخدامها. انتقل إلى chrome://flags وقم بتمكين العلامة "تمكين ميزات Web Platform التجريبية" .

بعد تمكين العلم ، يجب عليك إعادة تشغيل المتصفح لتصبح التغييرات سارية المفعول.

واجهة HTMLDialogElement

تحتوي واجهة HTMLDialogElement ، المضمنة في مواصفات HTML للعنصر <dialog> ، على العديد من الخصائص والطرق التي يمكنك استخدامها لجعل مربعات الحوار تظهر وتختفي. وهم على النحو التالي:

طرق:

تحتوي واجهة HTMLDialogElement على ثلاث طرق لفتح وإغلاق مربعات الحوار.

• show() : تُستخدم هذه الطريقة لإظهار مربع حوار. لا يزال بإمكان المستخدمين الوصول إلى المحتويات الأخرى لمستند HTML طالما كان مربع الحوار مفتوحًا.
• showModal() : يُستخدم لتشغيل "مربع حوار مشروط" ، والذي يمنع المستخدم من الوصول إلى أي شيء باستثناء نافذة الحوار على صفحة الويب.
• close() : يستخدم لإغلاق مربع حوار. يمكنك تمرير returnValue اختياري يقوم بتحديث الخاصية returnValue .

الخصائص:

هناك نوعان من الخصائص المضمنة في واجهة HTMLDialogElement .

• returnValue : استرداد المعلمة التي تم تمريرها اختياريًا إلى close() .
• open : هذه الخاصية هي قيمة منطقية. إذا كان هذا true ، فسيكون مربع الحوار مرئيًا للمستخدم. وإلا فسيتم إخفاؤه.

الأحداث:

عند إغلاق مربع حوار ، سيتم إطلاق حدث close .

 الحوار.addEventListener ('إغلاق' ، الوظيفة () {
سيظهر الرمز الآخر هنا ...
}) ؛

بصرف النظر عن هذه الأساليب والخصائص الأساسية ، يدعم عنصر <dialog> أيضًا:

• form[method="dialog"] : يستخدم لدمج نموذج مع <dialog> . صالح فقط داخل مربع حوار.
• autofocus attribute : تُستخدم للتركيز على عنصر تحكم في النموذج داخل مربع حوار.
• cancel event : يتم تشغيل حدث cancel عند إغلاق مربع حوار مشروط عبر "Esc"

الآن بعد فهم أساسيات عنصر <dialog> ، دعنا نبدأ العملية ببعض الأمثلة.

خلق حوار

أولاً ، سأوضح لك كيفية إنشاء مربع حوار بسيط. يحدد الكود الوارد أدناه عنصر <dialog> بسيط مع بعض المحتوى ، وزر إغلاق لإخفاء مربع الحوار ، وزر إظهار لبدء تشغيل مربع الحوار.

مرحبًا بك في Respive Junction!
احصل على موقعك الحالي للاستجابة
مخرج

إظهار الحوار

عندما تختبر الرمز أعلاه في متصفحك ، فلن ترى شيئًا سوى زر "إظهار الحوار" بدون أي وظيفة ، كما هو موضح في لقطة الشاشة الواردة أدناه:

لفتح وإغلاق عنصر <dialog> ، تحتاج إلى استخدام JavaScript .show() و .close() .

 (وظيفة() {  
 	var الحوار = document.getElementById ('Dialog') ؛
document.getElementById ('showDialog'). onclick = function () {  
حوار. تظهر () ؛  
} ؛  
document.getElementById ('closeDialog'). onclick = function () {  
مربع الحوار إغلاق () ،  
} ؛
}) () ؛

الآن إذا قمت بالنقر فوق الزر "إظهار مربع الحوار" ، يمكنك رؤية نافذة الحوار في المتصفح. النقر على "خروج" سيغلق نافذة الحوار. ها هي لقطة الشاشة:

إضافة نمط إلى الحوار

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

 مربع حوار {
أعلى: 28٪؛
العرض: 400 بكسل ؛  
الحدود: 1 بكسل صلبة rgba (0 ، 0 ، 0 ، 0.3) ؛
نصف قطر الحدود: 15 بكسل ؛
مربع الظل: 0 3 بكسل 7 بكسل rgba (0 ، 0 ، 0 ، 0.3) ؛
أعلى الحد: 5 بكسل صلب # eb9816 ؛
}
زر{
عرض: مضمنة كتلة ؛
نصف قطر الحدود: 3 بكسل ؛
الحدود: لا يوجد ؛
حجم الخط: 0.9rem ؛
الحشو: 0.4rem 0.8em ؛
الخلفية: # eb9816 ؛
الحد السفلي: 1 بكسل صلب # f1b75c ؛
اللون الابيض؛
وزن الخط: عريض ؛
الهامش: 0 0.25rem ؛
محاذاة النص: مركز ؛
}
زر: تحوم ، زر: تركيز {
العتامة: 0.92 ؛
المؤشر: المؤشر.
}

إنشاء حوار مشروط

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

يشبه إنشاء النماذج إنشاء مربعات الحوار ، مع الاختلاف الوحيد في استخدام .showModal() بدلاً من .show() . ليست هناك حاجة لإجراء أي تغييرات في كود HTML.

(وظيفة() {  
 	var الحوار = document.getElementById ('Dialog') ؛
document.getElementById ('showDialog'). onclick = function () {  
الحوار. showModal () ، 
} ؛  
document.getElementById ('closeDialog'). onclick = function () {  
مربع الحوار إغلاق () ،  
} ؛
}) () ؛

بينما يتم عرض مربعات الحوار الافتراضية في الوسط أفقيًا ، يتم عرض مربعات الحوار المشروطة عموديًا بالإضافة إلى توسيطها أفقيًا في منفذ العرض. يمكنك أيضًا إغلاق مربع حوار مشروط بالضغط على مفتاح "Escape" .

إضافة لون خلفية حوار مشروط

يتميز عنصر <dialog> بعنصر زائف يسمى "::backdrop" ، والذي يعمل فقط مع الحوارات المشروطة. باستخدام هذا العنصر ، يمكنك تعتيم الصفحة الرئيسية لإبلاغ المستخدمين بأنه لا يمكن الوصول إليها. يمكنك وضع وتصميم خلفية من خلال الاستفادة من خصائص CSS القياسية:

 الحوار :: خلفية {
الموقف: ثابت ؛
أعلى: 0؛
اليسار: 0؛
اليمين: 0؛
أسفل: 0؛
لون الخلفية: rgba (0 ، 0 ، 0 ، 0.7) ؛
}

تنفيذ <dialog> بنموذج

يمكن دمج النموذج مع عنصر <dialog> باستخدام form method="dialog" . عند تقديم النموذج ، سيتم إغلاق نافذة الحوار وإرجاع قيمة زر dialog.returnValue عبر خاصية الحوار.

فيما يلي رمز HTML لمربع حوار النموذج:

هل توافق على شروط الاستخدام؟
أدخل النص هنا!

نعم
رقم


فتح مربع حوار النموذج

استخدم JavaScript التالي لمربع حوار النموذج.

var formDialog = document.getElementById ('formDialog') ،
document.getElementById ('showformDialog'). onclick = function () {  
formDialog.showModal () ،  
} ؛
document.getElementById ('submit'). onclick = function () {
formDialog.close (القيمة) ؛
} ؛
document.getElementById ('formDialog'). addEventListener ('close'، function () {
تنبيه (formDialog.returnValue) ؛
}) ؛

ملاحظة : من أجل فهم أفضل ، أستخدم formDialog بدلاً من Dialog في العرض التوضيحي الخاص بي.

إذا كنت تريد رؤية عنصر <dialog> أثناء العمل أو التلاعب بالكود ، فقم بعرض العرض التوضيحي المباشر هنا.

خاتمة

مع تناسخ عنصر <dialog> ، أصبح من السهل جدًا على المطورين إنشاء مربعات حوار دون استخدام مكون jQuery الإضافي. على الرغم من أن Chrome Canary و Safari 6.0 يفسران عنصر <dialog> بشكل صحيح ، إلا أن هناك تعويضًا متاحًا للتأكد من أن المتصفحات الأخرى ستدعم العنصر.

إذا كنت ترغب في التعرف على خصائص HTML5 الأخرى ، فقد ترغب في التحقق من Getting to Grips with HTML5 File API ، أو قد ترغب في التعرف على سمة قائمة سياق HTML5.