كيفية عمل نافذة منبثقة في HTML

جدول المحتويات:

كيفية عمل نافذة منبثقة في HTML
كيفية عمل نافذة منبثقة في HTML

فيديو: كيفية عمل نافذة منبثقة في HTML

فيديو: كيفية عمل نافذة منبثقة في HTML
فيديو: عمل نافذة منبثقة popup with html | css | js 2024, أبريل
Anonim

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

كيفية عمل نافذة منبثقة في HTML
كيفية عمل نافذة منبثقة في HTML

تعليمات

الخطوة 1

افتح صفحة موقع HTML في محرر النصوص الذي تستخدمه لكتابة الرمز الذي تريده. يمكنك أيضًا استخدام أداة Windows Notepad القياسية لإدراج نافذة منبثقة. للقيام بذلك ، انقر بزر الماوس الأيمن على ملف HTML وحدد "فتح باستخدام" - "المفكرة".

الخطوة 2

في قسم المستند ، أنشئ طبقة ستتعامل مع jQuery:

الخطوه 3

ثم تحتاج إلى تعيين اسم النافذة المنبثقة. للقيام بذلك ، يمكنك استخدام رؤوس HTML المتدرجة:

عنوان النافذة

الخطوة 4

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

نص

الخطوة الخامسة

ثم قم بإنشاء طبقة بالفئة close_win لإغلاق النافذة المنبثقة ، قبل إغلاق المقبض السابق:

أغلق النافذة

الخطوة 6

قم بتضمين مكتبة jQuery في الملف عن طريق إضافة العلامة المطلوبة بين واصفات الوثيقة. فمثلا:

الخطوة 7

بعد ذلك ، أدخل الرمز لعرض النافذة المنبثقة:

$ (الوظيفة () {

$ ('# Show'). إخفاء ()؛

الخطوة 8

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

$ ("# Click-me"). انقر فوق (function () {$ ("# show"). Fadein (300)؛})

$ ("# Close_win"). انقر فوق (function () {$ ("# show"). FadeOut (300)؛})

& lt / script>})

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

الخطوة 9

لعرض النافذة المنبثقة على الصفحة ، يمكنك استخدام رابط فئة click-me المحددة في الكود أعلاه. للقيام بذلك ، أدخل الرمز التالي في نص المستند:

انقر لإظهار النافذة المنبثقة

موصى به: