تحياتي لجميع زوار مدونتي! من النادر جدًا كتابة المقالات، وهو أمر غير جيد. أخشى بالفعل أن أعد بشيء ما، كما كان من قبل - سأكتب كثيرًا وكل ذلك. والسبب هو نفسه - ضيق الوقت. حسنًا، هذا ليس ما تتناوله مقالة اليوم. دعونا نتحدث عن النوافذ المنبثقة للموقع. لا يوجد عمليًا أي مواقع على الإنترنت لا تستخدم النوافذ المنبثقة (المشروطة). وفي هذا الصدد، اعتبرت ذلك هذا الموضوعمهم جدًا لمطور الويب. هناك الكثير من البرامج النصية للنوافذ المشروطة على الإنترنت. أيهما يجب أن أختار بحيث يكون الاتصال به أسهل، والاستخدام أسهل، ويحتوي على مجموعة واسعة من الإمكانات، وما إلى ذلك؟ لقد وجدت واحدة لنفسي ...

هيكل المادة

المنبثقة الرائعة - البرنامج المساعد مسجالنوافذ المنبثقة، التي تم تصميمها مع التركيز على الأداء وسهولة الاستخدام. هكذا يصفه مؤلف السيناريو ديمتري سيمينوف بإيجاز وأنا أتفق معه تمامًا. لقد كنت أستخدم Magnific Popap للنوافذ المشروطة منذ بعض الوقت وأصبحت مقتنعًا بذلك.

بشكل عام، أود أن أشير إلى أن Magnific تحظى بشعبية كبيرة، سواء في RuNet أو في الإنترنت البرجوازي، على الرغم من حقيقة أن المطور يتحدث باللغة الروسية. بشكل عام، Magnific Popup يستحق مني أن أكتب تدوينة منفصلة عنه.

فيما يلي المزايا الرئيسية للمكون الإضافي التي يمكنني تسليط الضوء عليها بنفسي:

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

• في النسق— نوافذ الكتلة العادية التي تحتوي على أي محتوى؛
• صورة- الصور المنبثقة؛
• اياكس- تحميل البيانات في النافذة باستخدام تقنية Ajax؛
• إطار العمل— تحميل بيانات النافذة إلى إطار Iframe، على سبيل المثال، فيديو يوتيوب;
• صالة عرض- صورة بشكل أساسي، ولكن مع إمكانية التمرير عبر الصور باستخدام الأسهم، أي. معرض صغير
• ارتفاع DPI (شبكية العين)- فقط لنوع الصورة. تتيح لك هذه الوحدة عرض الصور من دقة عاليةعلى الأجهزة المزودة بشاشات عرض كثافات مختلفةبكسل. بصراحة، لم أكتشف هذا الأمر، لذلك ليس هناك الكثير لأقوله حول هذا الموضوع. في هذه المناسبة. سيتعين علينا أن نأخذ الوقت الكافي لمعرفة ذلك.
• تكبير الصورة المتحركة— الرسوم المتحركة عندما تنبثق الصورة. إذا كان شخص ما لا يحتاج إلى الرسوم المتحركة، فلا تقم بتشغيلها هذه الوحدةفي حزمة.

يمكن ضبط حجم النافذة باستخدام CSS، وليس من خلال JavaSript، كما هو الحال في العديد من البرامج النصية الأخرى. بشكل عام، سأقول أنه من خلال CSS يمكنك تخصيص مظهر النافذة حسب تقديرك، على الرغم من أنني سعيد جدًا بالمظهر الافتراضي ...

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

إعداد مرن. على سبيل المثال، يمكننا تغيير الرسوم المتحركة المنبثقة عن طريق تمرير الفصل الخاص بنا عبر المعلمات (خيار mainClass أدناه). التالي ل من هذه الفئةوصف الرسوم المتحركة قواعد CSS(وهذا هو بالضبط ما كنت أتحدث عنه عندما قصدت أنه يمكن تكوين النوافذ المنبثقة بمرونة من خلال CSS). يمكنك أن ترى تقريبًا كيف قد يبدو الأمر.

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

فتح النوافذ المشروطة خطوة بخطوة - يمكنك فتح النوافذ خطوة بخطوة، على سبيل المثال، نافذتان. انظر إلى المثال وسوف تفهم كل شيء.

يوجد مكون إضافي لـ WordPress - لا داعي للقلق بشأن الاتصال، ما عليك سوى تثبيت المكون الإضافي وتنشيطه.

لتنزيل Magnific Popup، انتقل إلى الموقع الرسمي للمطور. انقر على رابط "أداة البناء" وحدد الوحدات التي نحتاجها في النافذة المشروطة. بعد كل شيء، انقر فوق "إنشاء بناء" واحصل على رمز البرنامج المساعد. هذا الرمزيجب نسخها إلى محرر التعليمات البرمجية، على سبيل المثال Notepad++ أو نص ساميةوحفظه بالملحق ".js". تحتاج أيضًا في نفس نافذة التصميم إلى حفظ كود CSS. للقيام بذلك، انقر بزر الماوس الأيمن على رابط "إصدار CSS" واحفظ ملف الأنماط. إذا كنت تستخدم معالجًا مسبقًا، فاحفظ الملف "إصدار Sass". إذا لم تتمكن من الحفظ، فاتبع الرابط واحفظ الكود بنفسك في محرر الكود.

اتصال منبثق رائع

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

في هذه المقالة، سأتناول فقط جوانب النوافذ المشروطة التي فهمتها والتي أقوم بتنفيذها بنشاط في عملية تطوير موقع الويب. اذا هيا بنا نبدأ.

نقوم بتضمين ملف البرنامج المساعد وملف أنماط Magnific Popup. إذا لم تكن متصلا مكتبة مسج، فيجب عليك بالتأكيد توصيله أيضًا. بشكل عام، الاتصال هنا لا يختلف عن الاتصال بأي برنامج نصي jQuery آخر. لقد كتبت عن ربط الأنماط والنصوص، أنصحك بقراءتها.

أنواع النوافذ المشروطة نوع المحتوى الموجود في النافذة مضمن

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

JQuery(document).ready(function($) ( $(".popup-content").magnificPopup(( type: "inline" )); ));

كما ترون، يتم تعليق حدث استدعاء النافذة المشروط على كائن ذي فئة "محتوى منبثق". لذلك، لنقم بإنشائه، على سبيل المثال، سيكون رابطًا مع مرساة للكتلة المستدعىة ذات id="text-popup" .

استدعاء نافذة مع النص

وهناك شيئ اخر. لكي تصبح نافذتنا مرئية، نحتاج إلى إضافة الكود التالي إلى ملف النمط "magnific-popup.css":

نافذة منبثقة بيضاء (الموضع: نسبي؛ الخلفية: #FFF؛ الحشو: 20 بكسل؛ العرض: تلقائي؛ الحد الأقصى للعرض: 500 بكسل؛ الهامش: 20 بكسل تلقائي؛)

تحدد هذه القاعدة لون الخلفيةالنافذة والمسافات البادئة. لم تكن موجودة في البداية في ملف الأنماط، لأن... يمكن تزيين النافذة نفسها حسب تقديرك.

ونتيجة لذلك، يتم فتح نافذة مشروطة مع النص الخاص بنا. انها بسيطة جدا.

نوع المحتوى - صورة

الآن دعونا نفتح الصور في النوافذ المشروطة.

// اكتب صورة - صورة بدون رسوم متحركة $(".image-popup").magnificPopup(( type: "image" )); // اكتب تكبير الصورة - صورة مع رسوم متحركة $(".image-popup-zoom").magnificPopup(( type: "image"، Zoom: (ممكّن: صحيح، المدة: 300 // مدة الرسوم المتحركة. لا تتغير هذه المعلمةأيضًا في CSS ) ));

معرض الصور

ستكون التهيئة كما يلي:

// نوع الصورة - معرض الصور $(".popup-gallery").magnificPopup((تفويض: "a"، النوع: "image"، tLoading: "جارٍ تحميل الصورة #%curr%..."، المعرض: (ممكّن : صحيح، navigationByImgClick: صحيح، التحميل المسبق: // سيتم التحميل المسبق 0 - قبل الصورة الحالية، و1 بعد الصورة الحالية ) ));

نوع المحتوى - Iframe

الآن دعونا نفتح فيديو يوتيوب في نافذة مشروطة.

افتح فيديو يوتيوب

سيكون رمز التهيئة كما يلي:

// اكتب Iframe - فيديو Youtube (أو Vimeo)، أو خرائط Google أو محتوى آخر في iframe $(".popup-youtube").magnificPopup(( type: "iframe" ));

// اكتب Iframe - فيديو Youtube (أو Vimeo)، أو خرائط Google أو أي محتوى آخر في iframe $(".popup-youtube").magnificPopup(( type: "iframe"، iframe: ( Patterns: ( youtube: ( Index: " youtube.com/"، // سلسلة تكتشف نوع الفيديو (في هذه الحالة YouTube). ببساطة عبر url.indexOf(index). يجب أن يكون الجزء %id% // أو فارغًا - سيتم إرجاع عنوان URL الكامل // أو دالة يجب أن تُرجع %id%، على سبيل المثال: // id: function(url) ( return "parsed id"; ) src: " //www.youtube.com/embed/%id%?autoplay=1&rel=0" // عنوان URL المأخوذ من كود iframe ) ) ) ));

بناءً على هذا الكود، يمكن ملاحظة أننا نقوم بإنشاء قالب فيديو Youtube الخاص بنا. في المعلمة "src" في النهاية، أضفنا المعلمة "rel=0" وهذا كل شيء، الآن لن يكون هناك مقاطع فيديو مماثلة في نهاية الفيديو. يمكنك التمرير إلى نهاية الفيديو ومشاهدته.

النوع - اياكس

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

تحميل الصفحة في وزارة الدفاع. نافذة اياكس

هذا رابط عادي لصفحة المقالة. هذا مجرد مثال وأنا أضع عنوان المقال من موقع الويب الخاص بي. لإظهار المحتوى فقط، وتجاهل الكتل غير الضرورية (رأس الموقع، الشريط الجانبي، التذييل، وما إلى ذلك)، سأضيف معلمة إلى نهاية العنوان - ?tmpl=component .

رمز التهيئة:

// نوع Ajax - تحميل المحتوى في نافذة مشروطة $(".simple-ajax-popup").magnificPopup(( type: "ajax" ));

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

النموذج في نافذة مشروط

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

// نموذج في نافذة مشروطة مع التركيز على حقل الاسم $(".popup-with-form").magnificPopup(( type: "inline", focus: "#name" )); فتح النموذج في نافذة مشروط

في هذه الحالة، عند فتح النموذج، يتم تشغيل التركيز على الحقل الذي يحتوي على المعرف = "الاسم" - الاسم.

مشروط الحوار

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

// مربع الحوار $(".popup-modal").magnificPopup(( type: "inline"، أداة التحميل المسبق: false، modal: true )); $(document).on("click", ".popup-modal-dismiss"، الوظيفة(e) ( e.preventDefault(); $.magnificPopup.إغلاق(); ));

هنا، كما نرى، يتم استخدام خيارات إضافية. سنتحدث عن بعضها أدناه.

فتح نافذة مشروط

يغلق

نافذة الحوار

لن تتمكن من استبعاد هذا بالوسائل المعتادة (زر الهروب أو النقر)، ولكن يمكنك إغلاقه برمجيًا بناءً على اختيارات المستخدم أو إجراءاته.

خيارات البرنامج المساعد

الآن دعونا نلقي نظرة على بعض خيارات البرنامج المساعد Magnific Popup.

الفئة الرئيسية

النوع - سلسلة
الافتراضي - فارغ

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

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

لنقم بإنشاء تهيئة منفصلة مع إمكانيات الرسوم المتحركة.

// نافذة مشروطةمع تأثير ZoomIn $(".popup-with-zoom-anim").magnificPopup(( type: "inline"، RemovalDelay: 300، mainClass: "my-mfp-zoom-in" ));

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

/** * الرسوم المتحركة Fade-zoom لمربع الحوار الأول **/ /* حالة البداية */ .my-mfp-zoom-in .zoom-anim-dialog ( العتامة: 0؛ -webkit-transition: كل 0.2 ثانية سهلة الإدخال -out؛ -moz-transition: كل 0.2s سهولة الدخول؛ -o-transition: كل 0.2s سهولة الدخول؛ -webkit-transform:scale(0.8)); -moz-transform:scale(0.8 -ms-transform: Scale(0.8); -zoom-in.mfp-ready .zoom-anim-dialog ( العتامة: 1; -webkit-transform: Scale(1); -moz-transform: Scale(1) -ms-transform: Scale(1); - o-transform: Scale(1); حوار الرسوم المتحركة (-webkit-transform: مقياس (0.8)؛ -moz-transform: مقياس (0.8)؛ -ms-transform: مقياس (0.8)؛ تحويل: مقياس (0.8)؛ الحالة */ .my-mfp-zoom -in.mfp-bg ( العتامة: 0؛ -انتقال webkit: تخفيف العتامة 0.3 ثانية؛ - انتقال moz: تخفيف العتامة 0.3 ثانية؛ -o-انتقال: تخفيف العتامة 0.3 ثانية؛ الانتقال: سهولة التعتيم بمقدار 0.3 ثانية؛ ) /* تحريك في */ .my-mfp-zoom-in.mfp-ready.mfp-bg ( العتامة: 0.8; ) /* تحريك للخارج */ .my-mfp-zoom-in.mfp-removing.mfp- bg ( العتامة: 0; ) /** * رسم متحرك للتحريك التلاشي لمربع الحوار الثاني */ /* عند البداية */ .my-mfp-slide-bottom .zoom-anim-dialog ( العتامة: 0; -webkit-transition: كل 0.2 ثانية سهولة الخروج؛ -moz-transition: كل 0.2 ثانية سهولة الخروج؛ -o-transition: كل 0.2 ثانية سهولة الخروج؛ منظور (600 بكسل) تدوير X (10 درجة)؛ -moz-تحويل: ترجمة Y (-20 بكسل) منظور (600 بكسل) تدوير X (10 درجة)؛ - تحويل ms: ترجمة Y (-20 بكسل) منظور (600 بكسل) تحويل: ترجمة Y (-20 بكسل) منظور (600 بكسل) تدوير X (10 درجة)؛ تحويل: ترجمة Y (-20 بكسل) منظور (600 بكسل) تدوير X (10 درجة)؛ /* تحريك في */ .my-mfp-slide-bottom.mfp- جاهز .zoom- حوار الرسوم المتحركة ( العتامة: 1؛ - تحويل webkit: ترجمة Y (0) منظور (600 بكسل) تدوير X (0)؛ - تحويل moz: ترجمة Y (0) منظور (600 بكسل) تدوير X (0)؛ -ms - تحويل: ترجمة Y (0) المنظور (600 بكسل) تدويرX(0); -o-تحويل: TranslationY(0) منظور(600px) RotateX(0); تحويل: ترجمة Y (0) منظور (600 بكسل) تدوير X (0)؛ ) /* تحريك للخارج */ .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog ( العتامة: 0؛ -webkit-transform: ترجمة Y(-10px) منظور(600px) تدويرX(10deg); - moz-transform: TranslationY(-10px) المنظور(600px) RotateX(10deg); -ms-transform: TranslationY(-10px) المنظور(600px) RotateX(10deg); -o-transform: TransformY(-10px) المنظور(600px ); - انتقال webkit: العتامة 0. سهولة الخروج لمدة 3 ثوانٍ؛ -moz-transition: العتامة 0.3 ثانية بسهولة؛ -o-الانتقال: العتامة 0.3 ثانية سهولة؛ الانتقال: سهولة التعتيم بمقدار 0.3 ثانية؛ ) /* تحريك في */ .my-mfp-slide-bottom.mfp-ready.mfp-bg ( العتامة: 0.8; ) /* تحريك للخارج */ .my-mfp-slide-bottom.mfp-removing.mfp- بغ (التعتيم: 0؛)

استدعاء نافذة مع النص

ومن ناحية أخرى، فإن الدعم الإعلامي والدعائي المستمر لأنشطتنا يسمح لنا بتقييم أهمية مجالات التطوير التدريجي.

إذا لاحظت في رمز التهيئة الذي استخدمناه خيار إضافي — delay.remove. بدون هذا الخيار، لن تعمل الرسوم المتحركة.

delay.remove

النوع - عدد صحيح
الافتراضي - 0

تأخير إزالة النوافذ المنبثقةمن DOM. القيمة تتوافق مع ميلي ثانية.

التحميل المسبق

النوع - منطقي
الافتراضي - صحيح

مؤشر الوضع الحالي. افتراضيًا، عند تحميل المحتوى، يتم عرض الرسالة "جارٍ التحميل..." إذا تم تمكين الخيار، فهو موجود دائمًا في DOM، ويتغير النص الموجود بداخله فقط. اعتمادًا على حالة الكتلة، يتغير الفصل. في CSS يمكننا تعيين تصميم مختلف. وهنا قائمة الطبقات:

/* عملية التحميل */ .mfp-s-loading ( ) /* تم التحميل بنجاح */ .mfp-s-ready ( ) /* التحميل مع وجود خطأ */ .mfp-s-error ( )

CloseBtnInside

النوع - منطقي
الافتراضي - صحيح

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

إغلاق BtnInside: خطأ

إغلاقOnBgClick

النوع - منطقي
الافتراضي - صحيح

يغلق النافذة المشروطة من خلال النقر على المنطقة المظلمة.

alignTop

النوع - منطقي
الافتراضي - خطأ

إذا تم تمكينه، فسيتم محاذاة النافذة إلى الحافة العلوية، وليس في المركز. تعمل المحاذاة عن طريق إضافة فئة - mfp-محاذاة-أعلى.

DisableOn

النوع - عدد صحيح
الافتراضي - فارغ

تعطيل الإجراء إذا كان الحد الأقصى لعرض نافذة المتصفح تعيين القيمة. ويمكنه أيضًا قبول دالة تُرجع صوابًا أو خطأً.

DisableOn: 768 أو DisableOn: function() ( if($(window).width()< 600) { return false; } return true; }

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

أتمنى أن تفهم ما هي إمكانيات Magnific Popup. أنا شخصياً لم أختبر بعد كل إمكانيات هذا البرنامج الإضافي. حتى الآن، أثناء كتابة هذا المقال، اكتشفت إمكانيات جديدة لـ Magnific.

أخيرًا، أريد أن أقدم لك رابطًا إلى Codepen الخاص بالمؤلف مع بعض الأمثلة على Magnific Popap - http://codepen.io/collection/nLcqo/. هذا كل شيء، سأختتمه هنا.

أتمنى أن تجد هذه المقالة مفيدة. شكرا لكم جميعا على اهتمامكم. كان زاور ماجوميدوف على اتصال. نراكم في المشاركات القادمة!

3. مثال على نافذة مشروطة jQuery يتم استدعاؤها من رابط (من العرض التوضيحي)

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

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

$(مستند).جاهز(وظيفة())
{
تنبيه ("النص في النافذة المنبثقة")؛
});

الصق الرمز في أي مكان في نص صفحتك. مباشرة بعد تحميل الصفحة، وبدون أي أوامر، ستظهر لك نافذة بالشكل التالي:

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

$(نافذة).تحميل(وظيفة())
{
تنبيه("اكتمل تحميل الصفحة!)");
});

استدعاء نافذة مشروطة jQuery من رابط مع CSS الخطوة التالية هي إنشاء نافذة مشروطة عند النقر فوق الارتباط. سوف تصبح الخلفية داكنة ببطء.

يمكنك غالبًا أن ترى أن نماذج تسجيل الدخول والتسجيل موجودة في مثل هذه النوافذ. دعونا ننكب على العمل

أولا، دعونا نكتب الجزء html. نضع هذا الرمز في نص المستند الخاص بك.

استدعاء نافذة مشروطة

نص نافذة مشروط
يغلق
النص في نافذة مشروط.

كود CSS. اما في ملف CSS منفصل، أو في الرأس.

جسم(
عائلة الخط: فردانا؛
حجم الخط: 15 بكسل؛
}
.link (اللون:#fff؛ زخرفة النص: لا شيء)
الرابط:تحويم (اللون:#fff؛ زخرفة النص:تسطير)
#قناع (
الموقف:مطلق؛
اليسار:0؛
أعلى:0؛
مؤشر z:9000;
لون الخلفية:#000;
عرض لا شيء؛
}
#صناديق.نافذة (
الموقف:مطلق؛
اليسار:0؛
أعلى:0بكسل؛
-الأعلى: 40 بكسل؛
العرض: 440 بكسل؛
الارتفاع: 200 بكسل؛
عرض لا شيء؛
مؤشر z:9999;
الحشو: 20 بكسل؛
إخفاء الفائض؛
}
#مربعات #الحوار (
العرض: 375 بكسل؛
الارتفاع: 203 بكسل؛
الحشو: 10 بكسل؛
لون الخلفية:#ffffff;
}
.قمة(
الموقف:مطلق؛
اليسار:0؛
أعلى:0؛
العرض: 370 بكسل؛
الارتفاع: 30 بكسل؛
الخلفية: #0085cc؛
الحشو: 8 بكسل 20 بكسل 6 بكسل 10 بكسل؛
}
.يغلق(
تعويم: صحيح؛
}
.محتوى(
الحشو العلوي: 35 بكسل؛
}

في كود jQuery، سنركز على موضع النافذة المشروطة والقناع، في حالتنا، التغميق التدريجي للخلفية.

انتباه! لا تنس تضمين المكتبة في رأس المستند!

ربط المكتبة من موقع جوجل. حسنًا، رمز jQuery نفسه.

رمز مسج

$(مستند).جاهز(وظيفة() (
$("أ").انقر(وظيفة(ه) (
e.preventDefault();
معرف فار = $(this).attr("href");
var MaskHeight = $(document).height();
var MaskWidth = $(window).width();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".نافذة .إغلاق").انقر فوق(وظيفة (ه) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").انقر(وظيفة () (
$(هذا).hide();
$(".window").hide();
});
});

النوافذ المنبثقة الخارجية مع الإعلانات أفكار رهيبة! لن ينصحك جميع مشرفي المواقع العقلاء أبدًا باستخدامها على موقعك. لكن اذا نحن نتحدث عنحول النوافذ المنبثقة الداخلية - هذا عنصر مفيدالذي يعطي معلومات إضافيةويحذر ويمنع ويعطي الاختيار وأكثر من ذلك بكثير.

ماذا سنصنع؟

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

ما هي الوظيفة التي ستتمتع بها النافذة؟

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

لنبدأ التطوير

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

انقر فوق X يظهر بعض العناوين هنا: المزيد من المحتوى، لوقت محدد انت تريدلإضافة المزيد قليلا

المربع المنبثق (الموضع: مطلق؛ نصف قطر الحدود: 5px؛ الخلفية: #fff؛ العرض: لا شيء؛ ظل الصندوق: 1px 1px 5px rgba(0,0,0,0.2); عائلة الخط: Arial, sans-serif مؤشر z: 9999999؛ حجم الخط: 14 بكسل؛ .popup-box .إغلاق (الموضع: مطلق؛ الأعلى: 0px؛ اليمين: 0px؛ عائلة الخط: Arial، Helvetica، sans-serif؛ وزن الخط: غامق؛ المؤشر: المؤشر؛ اللون: #434343؛ حجم الخط: 20 بكسل؛ .popup-box .top ( الحشو: 20px; ) .popup-box .bottom ( الخلفية: #eee; الحد العلوي: 1px صلب #e5e5e5; الحشو: 20px; الحد السفلي من اليسار- نصف القطر: 5px; الحد السفلي - نصف القطر الأيمن: 5px؛) #تعتيم (الخلفية: rgba(0,0,0,0.3); الموضع: مطلق; الأعلى: 0; الفائض: مخفي; مؤشر z: 999999; اليسار: 0; العرض: لا شيء;

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

كود نافذة jQuery المنبثقة

للبدء، قم بتضمين ملف مكتبة jQuery. بعد ذلك، نقوم بتهيئة jQuery وإضافة div #blackout إلى نص المستند. نحدد أيضًا عرض النافذة المنبثقة.

$(document).ready(function() ( $("body").append(""); var boxWidth = 400;

بعد ذلك، نقوم بإنشاء وظيفة تركز النافذة. قمنا سابقًا بتعيين الموضع المطلق في CSS، ولا يمكننا استخدام الهامش: 0px auto؛ نحن بحاجة إلى تحديد عرض الشاشة، وطرح عرض النافذة المنبثقة منه، وتقسيم كل هذا على 2. سيكون الارتفاع الموقف الحالىقم بالتمرير، بالإضافة إلى حوالي 150 بكسل.

قمنا في وقت سابق بإنشاء قسم #blackout، وذلك لتغطية محتوى الصفحة بالظل. نحتاج الآن إلى التأكد من أن هذه الكتلة سيكون لها نفس العرض والارتفاع مثل الشاشة. يتم حساب هذا أيضًا في هذه الوظيفة.

وظيفة centerBox() ( /* تحديد البيانات المطلوبة */ var winWidth = $(window).width(); var winHeight = $(document).height(); varscrollPos = $(window).scrollTop(); / * احسب الموضع */ var disWidth = (winWidth - boxWidth) / 2 var disHeight =scrollPos + 150 /* إضافة أنماط إلى الكتل */ $(".popup-box").css(("width" : boxWidth+ "px" , "left" : disWidth+"px", "top" : disHeight+"px")); $("#blackout").css(("width" : winWidth+"px", "height" : winHeight+" بكسل") ؛ إرجاع خطأ ؛

يجب تشغيل هذه الوظيفة 3 مرات. عندما يقوم المستخدم بالتمرير، عندما يقوم المستخدم بتغيير حجم النافذة، وأيضًا في البداية عند تحميل الصفحة.

$(window).resize(centerBox); $(window).scroll(centerBox); centerBox();

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

$("").click(function(e) ( /* منع الإجراءات الافتراضية */ e.preventDefault(); e.stopPropagation(); /* الحصول على المعرف ( الرقم الأخيرفي اسم فئة الرابط) */ var name = $(this).attr("class"); معرف فار = اسم؛ var التمريرPos = $(window).scrollTop(); /* العرض الصحيح للنافذة المنبثقة، مع التغطية بالظل، ومنع التمرير */ $("#popup-box-"+id).show(); $("#تعتيم").show(); $("html,body").css("overflow", "hidden"); /* إصلاح الخلل في فايرفوكس */ $("html").scrollTop(scrollPos); )); $("").click(function(e) ( /* منع الرابط من العمل إذا كان خاصًا بنا نافذة منبثقة*/ e.stopPropagation(); )); $("html").click(function() ( var التمريرPos = $(window).scrollTop(); /* إخفاء النافذة عند النقر خارج منطقتها */ $("").hide(); $(" #blackout").hide(); $("html,body").css("overflow"، "auto"); $("html").scrollTop(scrollPos); )); $(".إغلاق").click(function() ( var التمريرPos = $(window).scrollTop(); /* إخفاء الظل والنافذة عندما ينقر المستخدم على X */ $("").hide() ; $("#blackout").hide(); $("html,body").css("overflow",auto"); $("html").scrollTop(scrollPos)); ));

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

1. نافذة مشروطة على jQuery "Simple Modal Box" 2. البرنامج المساعد jQuery "LeanModal"

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

3. البرنامج المساعد مسج "ToastMessage"

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

4. المحتوى الذي ينبثق في نافذة مشروطة

البرنامج المساعد "كشف". لرؤية المكون الإضافي أثناء العمل، انقر فوق الزر "Fire A Reveal Modal" في الصفحة التجريبية.

5. مربعات الحوار اللطيفة

انقر فوق علامة التقاطع في الصفحة التجريبية لرؤية المكون الإضافي قيد التنفيذ.

6. نافذة Mootools المشروطة، البرنامج المساعد "MooDialog".

7. لوحة jQuery المنبثقة في أعلى الشاشة

8. نافذة مسج منبثقة

البرنامج المساعد jQuery لعرض النموذج تعليقفي نافذة منبثقة.

10. البرنامج المساعد MooTools "LightFace" للتنفيذ مربعات الحوارفيسبوك

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

11. نافذة مشروطة مسج

مربع حوار منبثق أنيق في jQuery.

12. نوافذ jQuery المشروطة

نوافذ مشروطة منبثقة لطيفة. ثلاثة أنماط. تحتوي الصفحة التجريبية على 3 روابط لفتح النوافذ.

13. نوافذ jQuery المشروطة

النوافذ المشروطة المنبثقة بعدة أنواع. لرؤية البرنامج المساعد في العمل، انقر على الرابط الموجود في الصفحة التجريبية.

15. الرسالة التي تظهر في أعلى الصفحة

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

16. نافذة مشروطة "ModalBox" في جافا سكريبت

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

17. البرنامج المساعد "Leightbox" باستخدام مكتبة النموذج الأولي

البرنامج المساعد لعرض المحتوى في النوافذ المشروطة.