النوافذ المنبثقة لمجموعة متنوعة من الأغراض لها استخدامات عديدة في بناء الويب. يمكن استخدامها لإنشاء أنواع مختلفة من القوائم ، ووضع النصوص الإعلانية والرسومات ، وتلميحات الأدوات عند ملء النماذج المعقدة ، ومن الملائم وضع النماذج نفسها في النوافذ التي لا تشغل مساحة على الصفحة. ستجد في مقالتنا وصفًا لكيفية إنشاء مثل هذه النافذة.
انه ضروري
المعرفة الأساسية بـ HTML
تعليمات
الخطوة 1
المنبثقة ، html ، الطبقة المخفية
الخطوة 2
في العديد من الصفحات على الويب ، يمكنك أن ترى أن المكتبات الفاخرة لأطر عمل JavaScript المختلفة (jQuery ، MooTools ، Prototype ، إلخ) تُستخدم لإنشاء نوافذ منبثقة في الصفحات. ومع ذلك ، في الواقع ، فهي ليست ضرورية عند حل هذه المشكلة بالذات. الأدوات المتاحة في Hypertext Markup Language (HTML) و Cascading Style Sheets (CSS) كافية لإنشاء النوافذ المنبثقة. ستعمل النوافذ التي تم إنشاؤها بهذه الطريقة بغض النظر عما إذا تم تمكين JavaScript في متصفح الزائر أم لا.
يمكن وضع كل التعليمات البرمجية التي تنشئ النافذة المنبثقة على سطرين. ينشئ السطر الأول ارتباطًا يجب النقر فوقه لعرض النافذة المنبثقة:
انقر هنا!
هنا ، تحدد السمة onmouseover لعلامة الارتباط نوع مؤشر الماوس الافتراضي للروابط. تحدد سمة onclick أنه عند النقر فوق الارتباط ، يجب أن تصبح كتلة PopUp المخفية مرئية.
السطر الثاني ، في الواقع ، هو النافذة المنبثقة. طبقة مع معرف PopUp وحجم النافذة ولون وحجم النص والخلفية والحدود المحددة في سمة النمط:
هذا هو النص في النافذة المنبثقة
إنه غير مرئي افتراضيًا - يُشار إلى ذلك بواسطة محدد العرض بقيمة لا شيء في وصف نمط الطبقة.
في الواقع ، هذا هو كل ما تحتاجه لإنشاء نافذة منبثقة - ضع هذين السطرين بين العلامات وصفحتك وستكون جاهزة للعمل.
الخطوه 3
لتتمكن من إغلاق النافذة المنبثقة أمام العلامة ، تحتاج إلى إضافة ارتباط يؤدي الإجراء المعاكس - إخفاء الطبقة المرئية بمعرف PopUp:
قريب
الخطوة 4
وإذا كنت تريد أن تنبثق النافذة ليس عن طريق النقر ، ولكن عن طريق تحريك مؤشر الماوس ، فيجب تعديل السطر الأول الذي يحتوي على الرابط بهذه الطريقة:
حرك الماوس هنا!
الخطوة الخامسة
أنت الآن على دراية بمبدأ وهيكل رمز النافذة المنبثقة ، ويعتمد تصميم مظهرها ومحتواها كليًا على أهدافك وخيالك.
