كيفية إنشاء صندوق تنبيه JavaScript أو نافذة منبثقة

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

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

هناك ثلاثة أنواع مختلفة من الأساليب المنبثقة المستخدمة في JavaScript: window.alert () و window.confirm () و window.prompt ().

إنذار

تعرض طريقة التنبيه الرسائل التي لا تتطلب من المستخدم إدخال رد. بمجرد استدعاء هذه الوظيفة ، سيظهر مربع حوار تنبيه مع الرسالة المحددة (الاختيارية). سيُطلب من المستخدمين تأكيد الرسالة قبل انتهاء التنبيه.

مثال:

window.alert("Welcome to our website");

مثال تنبيه MDN

تؤكد

تشبه طريقة التأكيد window.alert()، ولكنها تعرض أيضًا زر إلغاء في النافذة المنبثقة. ترجع الأزرار قيمًا منطقية: صواب لموافق وخطأ لإلغاء.

مثال:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
نموذج تأكيد MDN

مستعجل

تُستخدم الطريقة السريعة عادةً للحصول على إدخال نص من المستخدم. يمكن أن تأخذ هذه الوظيفة وسيطين ، كلاهما اختياري: رسالة لعرضها للمستخدم وقيمة افتراضية لعرضها في حقل النص.

مثال:

var age = prompt('How old are you?', '100');

مثال موجه MDN

خيارات التصميم الأخرى:

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

بناء الجملة على هذا النحو: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

سوف ينتج عن الكود أعلاه النافذة المنبثقة التالية:

مثال SweetAlert

SweetAlert ليس بأي حال من الأحوال البديل الوحيد للنماذج القياسية ، ولكنه نظيف وسهل التنفيذ.

معلومات اكثر:

  • MDN window.alert ()
  • MDN window.confirm ()
  • MDN window.prompt ()