في كثير من الأحيان ، يمكنك العثور على نماذج على مواقع الويب ، ويتم استخدامها جميعًا في مهام مختلفة. في الواقع ، إنها أداة قوية تسمح لك بجعل واجهة الموقع أكثر تفاعلية وسهولة في الاستخدام. على سبيل المثال ، يمكن استخدام النوافذ المشروطة لأشكال مختلفة ، مثل نموذج التفويض ، ونموذج الملاحظات ، وطلب منتج ، وأنت لا تعرف أبدًا.
في هذا المنشور ، سنلقي نظرة على مثال على كيفية إنشاء نافذة بسيطة مشروطة باستخدام jQuery و CSS. خصوصية هذا المثال هو أنه غير مطلوب هنا ، حسنًا ، باستثناء مكتبة jQuery نفسها.
ضع رمز النافذة المشروطة على الصفحة:
كما ترى من الترميز ، فإن كتلة النافذة المشروطة نفسها عبارة عن div مع id = سمة شكليالذي يحتوي على عنصر امتداد بالمعرف = مشروط... سيعمل هذا العنصر كزر لإغلاق النافذة المشروطة ، بالإضافة إلى ذلك ، يوجد أسفل الكتلة div مع id = سمة تراكب، والذي يعمل في نفس الوقت على تعتيم الخلفية. سيتم فتح النافذة المشروطة بالرجوع إلى الفصل مشروط.
CSS للنافذة المشروطة
#modal_form (العرض: 300 بكسل ؛ الارتفاع: 300 بكسل ؛ نصف قطر الحد: 5 بكسل ؛ الحد: 3 بكسل # 000 صلب ؛ الخلفية: #fff ؛ الموضع: ثابت ؛ أعلى: 45٪ ؛ يسار: 50٪ ؛ هامش أعلى: -150 بكسل ؛ margin-left: -150px ؛ عرض: لا شيء ؛ عتامة: 0 ؛ z-index: 5 ؛ padding: 20px 10px ؛) #modal_form #modal_close (عرض: 21 بكسل ؛ ارتفاع: 21 بكسل ؛ الموضع: مطلق ؛ أعلى: 10 بكسل ؛ يمين: 10px؛ cursor: pointer؛ display: block؛) # overlay (z-index: 3؛ position: fixed؛ background-color: # 000؛ opacity: 0.8؛ -moz-opacity: 0.8؛ filter: alpha (opacity = 80) ؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ الأعلى: 0 ؛ اليسار: 0 ؛ المؤشر: المؤشر ؛ العرض: لا شيء ؛)
ل شكليقمنا بتعيين عرض وارتفاع ثابتين ثم قمنا بتوسيط الموضع في منتصف الشاشة. للحصول على أساس مشروط ( تراكب) نقوم بتعيين الحجم على عرض الشاشة ، ونملأه بالشفافية ، ونخفيه أيضًا بشكل افتراضي. لحظة خاصة مع الفهرس z، يجب أن يحتوي النموذج على أكبر عدد من جميع العناصر الموجودة على الصفحة ، ويجب أن يحتوي الغلاف على أكبر العناصر جميعها باستثناء النموذج نفسه.
الآن إلى أبسط ، هذا هو كود جافا سكريبت. بالنسبة للنافذة المشروطة ، سيتم استخدام حدثين رئيسيين ، وهذا هو فتحها - النقر فوق عنصر مع الفصل مشروط، في حالتنا هذا رابط ، وإغلاق النافذة المشروطة هو نقرة على الغلاف ( تراكب) ، أو انقر فوق زر الإغلاق ، وهو في حالتنا عنصر امتداد بمعرف = مشروط.
$ (document). function () (// ثم اعرض نافذة التعديل $ ("# modal_form") .css ("display"، "block") .animate ((opacity: 1، top: "50٪")، 200)؛) )؛))؛ // أغلق النافذة المشروطة $ ("# modal_close، #overlay"). انقر فوق (function () ($ ("# modal_form") .animate ((opacity: 0، top: "45٪") ، 200، // تقليل وظيفة العتامة () (// بعد الرسوم المتحركة $ (هذا) .css ("عرض" ، "لا شيء") ؛ // إخفاء النافذة $ ("# تراكب"). fadeOut (400) ؛ / / إخفاء التراكب)) ؛)) ؛)) ؛
مع الرسوم المتحركة نغير الوضع الرأسي أعلى، فضلا عن الشفافية العتامة، وبذلك نحصل على تأثير مثير للاهتمام. يتم استخدام نفس التأثير عند فتح النافذة وعند إغلاقها. الفرق هو أن ترتيب تطبيق خصائص الكتل قد تغير ، وبالتالي تصور فتح وإغلاق النافذة.
3. مثال على نافذة jQuery مشروطة تم استدعاؤها من خلال المرجع (مع عرض توضيحي)
على الأرجح ، لقد رأيت بالفعل نافذة مشروطة منبثقة على الإنترنت - تأكيد التسجيل ، والتحذير ، ومعلومات المساعدة ، وتنزيل الملفات وغير ذلك الكثير. في هذا البرنامج التعليمي ، سأقدم بعض الأمثلة عن كيفية إنشاء أبسط النوافذ المشروطة.
كيفية إنشاء نموذج بسيط منبثقة
لنبدأ في فحص رمز أبسط نافذة مشروطة ستظهر على الفوركود jQuery
الصق الكود في أي مكان في هيئةصفحتك. بعد تحميل الصفحة مباشرة ، بدون أي أوامر ، سترى نافذة تبدو كالتالي:
ولكن سيتم تنفيذ الكود التالي بعد تحميل الصفحة بأكملها في المتصفح. في مثالنا ، بعد تحميل الصفحة بالصور ، ستظهر نافذة منبثقة بسيطة:
استدعاء نافذة jQuery المشروطة بالرجوع إلى CSS
الخطوة التالية هي الإنشاء نافذة مشروطةعند النقر على الرابط. ستغمق الخلفية ببطء.
غالبًا ما ترى أن استمارات تسجيل الدخول والتسجيل موجودة في هذه النوافذ. دعونا ننكب على العمل
أولا ، دعنا نكتب جزء أتش تي أم أل... نضع هذا الرمز في نص المستند الخاص بك.
استدعاء نافذة مشروطة
كود CSS... إما في ملف css منفصل أو بتنسيق
في كود jQuery ، سنركز على موضع الوسيط والقناع ، وفي هذه الحالة نغمق الخلفية تدريجيًا.
انتباه! لا تنس تضمين المكتبة في رأس المستند!
ربط المكتبة من موقع جوجل. حسنًا ، كود jQuery نفسه.
كود JQuery
عند الحديث عن تقنيات بناء المواقع المختلفة ، سيكون من السخف عدم الحديث عن بعض الطرق لإنشاء نوافذ مشروطة. لن نناقش الغرض والفائدة والمشاكل الناشئة لاستخدام النوافذ المنبثقة والنوافذ النموذجية. دعنا نحلل واحدًا فقط من أمثلة عديدة لإنشاء مثل هذه النوافذ.
هناك مواقف يتعذر فيها استخدام مكونات إضافية خاصة ، على سبيل المثال ، مثل و ، لذا فإن الأمر يستحق أن تفهم كيف يمكنك إنشاء إضافات خاصة بك.
دعونا نرى كيفية القيام بذلك:
لغة البرمجة
لنبدأ بإضافة العلامات بالسمات التالية:
- href - #؟ w = 500 يشير إلى عرض النافذة
- rel - سمة فريدة لكل نافذة
- class = "poplight" - فئة لإظهار النافذة المنبثقة
| < a href= "#?w=500" rel= "popup_name" class = "poplight" >راجع Window in Action - العرض = 500px |
راجع Window in Action - العرض = 500px
بعد ذلك ، نحتاج إلى إنشاء ترميز مضمن للنوافذ المنبثقة. يمكنك وضعه في أي مكان على الصفحة ، على سبيل المثال ، أسفل المحتوى. لاحظ أن المعرف المنبثق يطابق السمة relبطاقة شعار
سيؤدي هذا إلى ربط الرابط والنوافذ المنبثقة معًا.
عنوان
أي نص يشتهيه قلبك
وهكذا ، اكتشفنا موضع نافذتنا على الصفحة ، والآن دعونا نصممها باستخدام الأنماط ، ونمنحها ، إذا جاز التعبير ، مظهرًا لائقًا.
تخطيط CSS
من أجل الوضوح ، قمت بكتابة بعض التفسيرات لمعايير نمط نافذتنا. نظرًا لأن النوافذ المنبثقة يمكن أن تكون ذات أحجام مختلفة ، فإننا لا نحددها في CSS popup_blockحواف النافذة ، لحساب الحجم المطلوب ، هذه مجرد مهمة.
| # تتلاشى (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * /الخلفية: rgba (7 ، 87 ، 207 ، 0.8) ؛ الموقف: ثابت ؛ اليسار: 0 ؛ أعلى: 0؛ العرض: 100٪؛ الارتفاع: 100٪؛ العتامة: .80 ؛ مؤشر z: 9999 ؛ ) .popup_block (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * /الخلفية: #fff ؛ الحشو: 20 بكسل ؛ الحدود: 8 بكسل rgb صلبة (134 ، 134 ، 134) ؛ تعويم: اليسار؛ حجم الخط: 85٪؛ الموقف: ثابت ؛ أعلى: 50٪؛ اليسار: 50٪؛ اللون: # 000 ؛ أقصى عرض: 750 بكسل ؛ العرض الأدنى: 320 بكسل ؛ الارتفاع: تلقائي ؛ مؤشر z: 99999 ؛ / * - مربع الظل CSS3 - * /-webkit-box-shadow: 0px 0px 20px # 000 ؛ -moz-box-shadow: 0px 0px 20px # 000 ؛ ظل الصندوق: 0px 0px 20px # 000 ؛ / * - تقريب زاوية CSS3 - * /-webkit-border-radius: 12px؛ - دائرة نصف قطرها: 12 بكسل ؛ نصف قطر الحدود: 12 بكسل ؛ ) .popup_block p (font-weight: 400؛ padding: 0؛ margin: 0؛ color: # 000؛ line-height: 1.6؛) .popup_block h2 (margin: 0px 0 10px؛ color: rgb (43، 43، 43 ) ؛ وزن الخط: 400 ؛ محاذاة النص: المركز ؛ ظل النص: 1 بكسل 1 بكسل 2 بكسل # 0D0C0C ؛) / * تشكيل زر اغلاق * /.close (لون الخلفية: rgba (61، 61، 61، 0.8)؛ border: 2px Solid #ccc؛ height: 25px؛ line-height: 20px؛ position: مطلق؛ right: -17px؛ font-weight: bold؛ محاذاة النص: المركز ؛ زخرفة النص: لا شيء ؛ المساحة المتروكة: 0 ؛ أعلى: -17 بكسل ؛ العرض: 25 بكسل ؛ -مجموعة الويب-حدود-نصف قطر: 50٪ ؛ -moz-border-radius: 50٪ ؛ -ms-border- نصف القطر: 50٪ ؛ -o-border-radius: 50٪؛ border-radius: 50٪؛ -moz-box-shadow: 1px 1px 3px # 000؛ -webkit-box-shadow: 1px 1px 3px # 000؛ box- shadow: 1px 1px 3px # 000 ؛) .close: before (color: rgba (255، 255، 255، 0.9)؛ content: "X"؛ font-size: 12px؛ text-shadow: 0-1px rgba (0، 0 ، 0 ، 0.9) ؛). 4px 10px # 857373؛ -moz-box-shadow: 4px 4px 10px # 857373؛ padding: 0؛) / * - تحديد المواقع الثابتة لـ IE6 - * /* html #fade (الموقف: مطلق ؛) * html .popup_block (الموضع: مطلق ؛) |
# تتلاشى (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * / الخلفية: rgba (7 ، 87 ، 207 ، 0.8) ؛ الموضع: ثابت ؛ يسار: 0 ؛ أعلى: 0 ؛ عرض: 100٪ ؛ ارتفاع: 100٪ ؛ العتامة: .80 ؛ z-index: 9999 ؛) .popup_block (العرض: لا شيء ؛ / * - مخفي افتراضيًا - * / الخلفية: #fff ؛ الحشو: 20 بكسل ؛ الحدود: 8 بكسل الصلبة rgb (134 ، 134 ، 134) ؛ عائم: يسار ؛ حجم الخط: 85٪ ؛ الموضع: ثابت ؛ أعلى: 50٪ ؛ يسار: 50٪ ؛ اللون: # 000 ؛ الحد الأقصى للعرض: 750 بكسل ؛ الحد الأدنى للعرض: 320 بكسل ؛ الارتفاع: تلقائي ؛ مؤشر z : 99999؛ / * - CSS3 box shadow - * / -webkit-box-shadow: 0px 0px 20px # 000؛ -moz-box-shadow: 0px 0px 20px # 000؛ box-shadow: 0px 0px 20px # 000؛ / * - تقريب الزوايا CSS3 - * / -webkit-border-radius: 12px ؛ -moz-border-radius: 12px ؛ نصف قطر الحدود: 12px ؛) .popup_block p (وزن الخط: 400 ؛ الحشو: 0 ؛ الهامش: 0 ؛ اللون: # 000 ؛ ارتفاع السطر: 1.6 ؛) .popup_block h2 (الهامش: 0px 0 10px ؛ اللون: rgb (43 ، 43 ، 43) ؛ وزن الخط: 400 ؛ محاذاة النص: المركز ؛ ظل النص: 1px 1px 2px # 0D0C0C؛) / * شكل زر الإغلاق * / .close (backgro und-color: rgba (61 ، 61 ، 61 ، 0.8) ؛ الحدود: 2px صلب #ccc ؛ الارتفاع: 25 بكسل ؛ ارتفاع الخط: 20 بكسل ؛ الموقف: مطلق. اليمين: -17 بكسل ؛ وزن الخط: عريض ؛ محاذاة النص: مركز ؛ زخرفة النص: لا شيء ؛ الحشو: 0 ؛ أعلى: -17 بكسل ؛ العرض: 25 بكسل ؛ نصف قطر مجموعة الويب الحدودية: 50٪ ؛ -موز حدود نصف قطرها: 50٪ ؛ نصف قطر حدود ms: 50٪ ؛ نصف قطر o الحدود: 50٪ ؛ نصف قطر الحدود: 50٪ ؛ -moz-box-shadow: 1px 1px 3px # 000 ؛ -webkit-box-shadow: 1px 1px 3px # 000 ؛ مربع الظل: 1px 1px 3px # 000 ؛ ) .close: before (color: rgba (255، 255، 255، 0.9)؛ content: "X"؛ font-size: 12px؛ text-shadow: 0-1px rgba (0، 0، 0، 0.9)؛) .close: hover (background-color: rgba (252، 20، 0، 0.8)؛). الظل (box-shadow: 4px 4px 10px # 857373؛ -webkit-box-shadow: 4px 4px 10px # 857373؛ -moz- box-shadow: 4px 4px 10px # 857373؛ padding: 0؛) / * - تحديد الموضع الثابت لـ IE6 - * / * html #fade (position: Absolute؛) * html .popup_block (موضع: مطلق ؛)
مع تشكيل النافذة وظهورها باستخدام css ، أعتقد أنه لن تكون هناك صعوبات معينة. يمكن كتابة الأنماط مباشرة على صفحة HTML ، بين العلامات
و، أو يمكنك وضعها في ملف منفصل لأنماطك ، وعادة ما يكون هذا ملفًا style.css، أو شيء من هذا القبيل.إعداد JQuery
من أجل العمل الكامل للنافذة المشروطة ، تحتاج إلى توصيل jQuery ، ويمكن لأولئك الذين ليسوا على دراية بعمل هذه المكتبة القراءة.
حسنًا ، سنمضي قدمًا. يمكنك استخدام أحدث إصدار من jQuery من موقع المكتبة على الويب ، أو استخدام ملف منفصل مستضاف في Google عن طريق ربطه بالمستند ، في القسم قبل علامة الإغلاق