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

ماذا سنصنع؟

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

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

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

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

لتنفيذ النافذة المنبثقة، سنستخدم CSS وبضعة أسطر من كود jQuery، وبالطبع 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 الأخرى في كود JavaScript. تتطلب هذه الأنماط حسابات إضافية، لذا سيكون من الأفضل القيام بذلك باستخدام jQuery. دعنا ننتقل إلى كود جافا سكريبت.

كود نافذة 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(); $("#blackout").show(); $("html,body").css("overflow", "hidden"); /* إصلاح خطأ في Firefox */ $("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! لا نحتاج إلى تنزيل المكونات الإضافية وكتابة وظائف معقدة، فقط بضعة أسطر من التعليمات البرمجية. يمكنك تنزيل المصادر ومعرفة كيفية عملها محليًا على جهاز الكمبيوتر الخاص بك.

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();
});
});

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

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

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

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

X نافذة منبثقة

يتم إنشاء هذه النافذة بإحدى أبسط الطرق. لا شيء شخصي، كل شيء بسيط :)

نحتاج الآن إلى تصميم كل شيء بشكل جميل والتأكد من أن كل شيء يعمل كما ينبغي. لنبدأ في التزيين.

ديكور

ModalDialog (الموضع: ثابت؛ عائلة الخط: Arial، Helvetica، sans-serif؛ الأعلى: 0؛ اليمين: 0؛ الأسفل: 0؛ اليسار: 0؛ الخلفية: rgba(0,0,0,0.8); z-index : 99999 ؛ -انتقال webkit: سهولة الإدخال بمعدل عتامة 400 مللي ثانية ؛

حوار مشروط ( الموقف: ثابت؛ عائلة الخطوط: Arial، Helvetica، sans-serif؛ أعلى: 0؛ الحق : 0 ; أسفل: 0؛ اليسار: 0؛ الخلفية: رغبا (0، 0، 0، 0.8)؛ مؤشر z: 99999؛ Webkit -- الانتقال : التعتيم 400ms سهولة في ; Moz - الانتقال : التعتيم 400 مللي ثانية سهولة في ; الانتقال: العتامة 400 مللي ثانية سهولة الدخول؛ عرض لا شيء؛ المؤشر - الأحداث: لا شيء؛

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

فتح نافذة منبثقة

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

ModalDialog: الهدف ( العرض: كتلة؛ أحداث المؤشر: تلقائي؛ ) .modalDialog > div ( العرض: 400 بكسل؛ الموضع: نسبي؛ الهامش: 10% تلقائي؛ الحشو: 5 بكسل 20 بكسل 13 بكسل 20 بكسل؛ نصف قطر الحدود: 10 بكسل؛ الخلفية: # الخلفية: -moz-linear-gradient(#fff, #999); الخلفية: -webkit-linear-gradient(#fff, #999); )

ModalDialog: الهدف ( العرض محجوب؛ أحداث المؤشر: تلقائي؛ ModalDialog> شعبة ( العرض: 400 بكسل؛ الموقف: نسبي؛ الهامش: 10% تلقائي؛ الحشو: 5 بكسل 20 بكسل 13 بكسل 20 بكسل؛ الحدود - نصف القطر: 10 بكسل؛ الخلفية: #ففف؛ الخلفية: - moz - خطي - متدرج (#fff، #999)؛ الخلفية: - webkit - خطي - متدرج (#fff، #999)؛ الخلفية : - o - خطي - متدرج (#fff، #999)؛

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

إغلاق نافذة مشروط

عندما يتم تعيين تصميم النافذة وفتحها، تحتاج إلى إنشاء زر لإغلاق النافذة - تصميمها وتنفيذ الوظيفة. يتيح لك استخدام CSS3 وHTML5 إنشاء أزرار مخصصة أنيقة دون استخدام الصور:

إغلاق ( الخلفية: #606061؛ اللون: #FFFFFF؛ ارتفاع الخط: 25 بكسل؛ الموضع: مطلق؛ اليمين: -12 بكسل؛ محاذاة النص: المركز؛ الأعلى: -10 بكسل؛ العرض: 24 بكسل؛ زخرفة النص: لا شيء؛ الخط- الوزن: غامق؛ -webkit-border-radius: 12px؛ -moz-border-radius: 12px؛ -moz-box-shadow: 1px 3px #000؛ :تحويم (الخلفية: #00d9ff;)

يغلق( الخلفية : #606061;

حصة هذه المادة: