كيفية إنشاء مربع حوار أو مربع شكلي باستخدام HTML CSS وجافا سكريبت

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

إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج (Custom Modal Box).

أتمنى أن تكون قد فهمت المفاهيم الأساسية والرموز الخاصة بهذا الصندوق النموذجي. كما رأيت في الفيديو ، استخدمت jQuery لإظهار وإخفاء Modal Box. أعتقد أنه سيساعد المبتدئين على فهم المفاهيم الفعلية وراء إنشاء مربع مشروط.

إذا كنت تحب هذا البرنامج (Custom Modal Box) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل.

مربع مشروط أو مربع حوار
لإنشاء هذا البرنامج (Custom Modal Box). أولاً ، تحتاج إلى تحميل ملف الاكواد من زر التحميل