نافذة منبثقة باستخدام HTML وCSS. نافذة مشروطة في JavaScript إنشاء نافذة مشروطة في HTML

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

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

يمكنك مشاهدة مثال لنافذة مشروطة باستخدام JavaScript باستخدام طريقة التنبيه ().

نافذة منبثقة

الخطوة الأولى في إنشاء نافذة منبثقة هي إنشاء عنصر (أو أي عنصر آخر) وتصميمه:

عنوان المستند .okno ( العرض: 300 بكسل; الارتفاع: 50 بكسل; محاذاة النص: المركز; الحشو: 15 بكسل; الحد: 3 بكسل صلب #0000cc; نصف قطر الحدود: 10 بكسل; اللون: #0000cc; ) نافذة منبثقة! يحاول "

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

عنوان المستند #okno ( العرض: 300 بكسل؛ الارتفاع: 50 بكسل؛ محاذاة النص: المركز؛ الحشو: 15 بكسل؛ الحد: 3 بكسل صلب #0000cc؛ نصف قطر الحدود: 10 بكسل؛ اللون: #0000cc؛ العرض: لا شيء؛ ) #okno:target (العرض: كتلة؛) نافذة منبثقة! دعوة منبثقة حاول »

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

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

#okno ( العرض: 300 بكسل؛ الارتفاع: 50 بكسل؛ محاذاة النص: المركز؛ الحشو: 15 بكسل؛ الحدود: 3 بكسل صلب #0000cc؛ نصف قطر الحدود: 10 بكسل؛ اللون: #0000cc؛ العرض: لا شيء؛ /*الموضع والوسط*/ الموضع: مطلق؛ الأعلى: 0؛ الأسفل: 0؛

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

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

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

عنوان المستند #main ( العرض: لا شيء؛ الموضع: مطلق؛ أعلى: 0؛ يسار: 0؛ العرض: 100%؛ الارتفاع: 100%؛ ) #okno ( العرض: 300 بكسل؛ الارتفاع: 50 بكسل؛ محاذاة النص: المركز؛ الحشو : 15 بكسل؛ الحد: 3 بكسل ثابت #0000cc؛ اللون: #0000cc؛ الموضع السفلي: 0؛ دعوة منبثقة حاول »

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

بهذا يكتمل إنشاء نافذة منبثقة بسيطة.

نافذة مشروطة

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

عنوان المستند #okno ( العرض: 300 بكسل؛ الارتفاع: 50 بكسل؛ محاذاة النص: المركز؛ الحشو: 15 بكسل؛ الحد: 3 بكسل صلب #0000cc؛ نصف قطر الحدود: 10 بكسل؛ اللون: #0000cc؛ العرض: لا شيء؛ الموضع: مطلق؛ أعلى : 0؛ اليمين: 0؛ اليسار: 0؛ الهامش: تلقائي) #window: target (display: block;) استدعاء المنبثقة

الخطوة التالية في إنشاء نافذة مشروطة كاملة هي إضافة زر لإخفاء نافذتنا. سنصنع زرًا من رابط عادي ونضيفه إلى رابطنا ونصممه:

عنوان المستند #okno ( العرض: 300 بكسل؛ الارتفاع: 50 بكسل؛ محاذاة النص: المركز؛ الحشو: 15 بكسل؛ الحد: 3 بكسل صلب #0000cc؛ نصف قطر الحدود: 10 بكسل؛ اللون: #0000cc؛ العرض: لا شيء؛ الموضع: مطلق؛ أعلى : 0؛ اليمين: 0؛ اليسار: 0؛ الهامش: تلقائي؛) #window: target (display: block;) ; : #e6e6ff؛)
إغلاق نافذة الاتصال المنبثقة حاول »

للحصول على تأثير تعتيم الصفحة عند عرض نافذة مشروطة، تحتاج إلى وضع كافة أكواد النافذة الموجودة في رمز إضافي:

نافذة منبثقة!
أغلق نافذة

ضع الأصل وقم بتمديده إلى كامل عرض النافذة وارتفاعها. قمنا بتعيينه للعرض: لا شيء؛ وأعد توجيه رابط استدعاء النافذة إليه.

بالنسبة للطفل، قم بإزالة العرض: لا شيء؛ (لم تعد هناك حاجة إليه لأن الوالد سيخفي كل شيء بداخله). ونتيجة لذلك، أصبح الوالد الآن مسؤولاً عن عرض النافذة المشروطة وتعتيم خلفية الصفحة، ويكون الطفل مسؤولاً فقط عن تزيين النافذة نفسها:

عنوان الوثيقة #zatemnenie ( الخلفية: rgba(102, 102, 102, 0.5); العرض: 100%; الارتفاع: 100%; الموضع: مطلق; الأعلى: 0; اليسار: 0; العرض: لا شيء; ) #okno ( width: 300 بكسل؛ محاذاة النص: 15 بكسل؛ نصف قطر الحدود: 10 بكسل؛ اليسار: 0؛ الهامش: الخلفية: #fff) #zatemnenie:target (العرض: كتلة؛) الحدود: 1 بكسل #0000cc؛ اللون: #0000cc؛ الحشو: 0 12 بكسل؛ الخلفية: #f2f2f2؛ إغلاق: تحويم (الخلفية: #e6e6ff؛)
إغلاق نافذة الاتصال المنبثقة حاول »

ملاحظة: إذا كنت تريد أن يرى المستخدم على الفور نافذة منبثقة عند الدخول إلى الصفحة (وعدم الاتصال بها عبر رابط)، فسيلزم إدخال عنوان الصفحة مع معرف النافذة (على سبيل المثال، قد يكون العنوان تبدو مثل هذا: site.ru/papka/documet html#window).

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

تم التحديث: 27/10/2017

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

لا ينبغي أن يؤخذ هذا الدرس كدليل للعمل، لأنه في هذه المرحلة كان من الممكن تحقيق دعم موثوق به فقط من خلال المتصفحات الحديثة (IE 9+، Firefox، Safari، Opera، Chrome). بالنظر إلى أن الإصدارات القديمة من متصفح IE لا تزال تحظى بشعبية كبيرة بين المستخدمين، أوصي بمشاهدة هذه المقالة كنوع من التجربة، عرض توضيحي لقدرات CSS3.

حسنًا، لننتقل الآن مباشرةً إلى التخطيط الفعلي لكود html وتصميم النافذة المشروطة باستخدام css3)))

الخطوة 1. HTML

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

< a href= "#win1" class = "button button-green" >افتح النافذة 1< a href= "#win2" class = "button button-red" >افتح النافذة 2< a href= "#win3" class = "button button-blue" >الفيديو في النافذة 3< a href= "#win4" class = "button button-orange" >الصورة في النافذة 4< a href= "#win5" >< img title= "" src= "img/realism_lrg.jpg" width= "150" height= "150" alt= "" /> < a href= "#x" class = "overlay" id= "win1" > < div class = "popup" > < a class = "close" title= "يغلق" href= "#close" > < a href= "#x" class = "overlay" id= "win2" > < div class = "popup" >هنا يمكنك وضع أي محتوى أو نص مع الصور أو مقاطع الفيديو!< a class = "close" title= "يغلق" href= "#close" > < a href= "#x" class = "overlay" id= "win3" > < div class = "popup" > < h2>العنوان هنا تقوم بإدراج الفيديو الخاص بك أو من أي مورد خارجي، YouTube، Vimeo، وما إلى ذلك (iframe، embed) ...< a class = "close" title= "يغلق" href= "page.html" onclick= "return false" > < a href= "#x" class = "overlay" id= "win4" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "يغلق" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "يغلق" href= "#close" >

فتح النافذة 1 فتح النافذة 2 الفيديو في النافذة 3 الصورة في النافذة 4 هنا يمكنك وضع أي محتوى أو نص مع الصور أو مقاطع الفيديو! العنوان هنا تقوم بإدراج الفيديو الخاص بك أو من أي مورد خارجي، YouTube، Vimeo، وما إلى ذلك (iframe، embed)...

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

الخطوة 2: CSS

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

/* الأنماط الأساسية للطبقة المعتمة والنافذة المشروطة */ . تراكب (أعلى: 0؛ يمين: 0؛ أسفل: 0؛ يسار: 0؛ مؤشر z: 10؛ عرض: لا شيء؛ /* تلاشي الخلفية */ لون الخلفية: rgba(0، 0، 0، 0.65) ؛ الموضع : ثابت؛ /* تحديد الموضع الثابت */ المؤشر: الافتراضي /* نوع المؤشر */ ) /* تنشيط الطبقة المظلمة */ . التراكب: الهدف (العرض: كتلة؛) /* أنماط مشروطة */ . نافذة منبثقة (أعلى: - 100%؛ يمين: 0؛ يسار: 50%؛ حجم الخط: 14 بكسل؛ فهرس z: 20؛ الهامش: 0؛ العرض: 85%؛ الحد الأدنى للعرض: 320 بكسل؛ الحد الأقصى للعرض: 600 بكسل؛ /* تحديد موضع ثابت، تكون النافذة ثابتة عند التمرير */ الموضع: الحشو الثابت: 15 بكسل; الحدود: 1 بكسل صلب #383838; حدود- نصف القطر: 4 بكسل؛ rgba(0, 0, 0, .22) , 0 19px 60px rgba(0, 0, 0, .3) ; - ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22) , 0 19px 60px rgba(0, 0, 0, .3 ) ; -تحويل: ترجمة(- 50%, - 500% ) ؛ - o- تحويل: ترجمة(- 50%, - 500% ) ; تحويل: ترجمة(- 50%, - 500% ) ; - webkit- الانتقال: - webkit- تحويل 0.6s سهولة الخروج؛ - moz- الانتقال: - moz- تحويل 0.6s سهولة الخروج؛ - o- الانتقال: - o- تحويل 0.6s سهولة الخروج؛ الانتقال: تحويل 0.6 ثانية سهولة الخروج؛ ) /* تنشيط الكتلة المشروطة */ . تراكب: الهدف +. نافذة منبثقة ( - webkit- تحويل: ترجمة (- 50%، 0 ) ؛ - مللي ثانية- تحويل: ترجمة (- 50%، 0 ) ؛ - o- تحويل: ترجمة (- 50%، 0 ) ؛ تحويل: ترجمة (- 50) %, 0 ) ; الأعلى: 20 % ) /* تشكيل زر الإغلاق */ . إغلاق (أعلى: - 10 بكسل؛ يمين: - 10 بكسل؛ العرض: 20 بكسل؛ الارتفاع: 20 بكسل؛ الموضع: مطلق؛ الحشو: 0؛ الحدود: 2 بكسل صلب #ccc؛ - webkit- border- radius: 15px؛ - moz- border- radius : 15px؛ - ms- border- radius: 15px; - o- border- radius: 15px; 000؛ محاذاة النص: المركز؛ الخط: 13px/ 20px "Tahoma"، Arial، sans-serif؛ 8 ثانية؛ - moz- الانتقال: كل سهولة. 8 ثانية؛ -ms- الانتقال: كل سهولة. 8 ثانية؛ -o- الانتقال: كل سهولة. 8 ثانية؛ الانتقال: كل سهولة. 8 ثانية؛ ) . الإغلاق: قبل ( اللون: rgba(255 , 255 , 255 , 0.9 ) ; المحتوى: "X" ; ظل النص: 0 - 1px rgba(0 , 0 , 0 , 0.9 ) ; حجم الخط: 12px; ) . إغلاق: تحويم (خلفية- اللون: rgba(252, 20, 0, 0.8) ؛ - webkit- تحويل: تدوير (360deg) ؛ - moz- تحويل: تدوير (360deg) ؛ - مللي ثانية- تحويل: تدوير (360deg) ؛ - o- تحويل: تدوير (360 درجة) ؛ تحويل: تدوير (360 درجة)) /* الصور داخل النافذة */ . صورة منبثقة (العرض: 100%؛ الارتفاع: تلقائي؛) /* الصور المصغرة يسار/يمين */ . الموافقة المسبقة عن علم اليسار، . الموافقة المسبقة عن علم اليمين (العرض: 25%؛ الارتفاع: تلقائي؛ ) . الموافقة المسبقة عن علم اليسار ( تعويم: يسار؛ الهامش: 5px 15px 5px 0 ; ) . الموافقة المسبقة عن علم - اليمين ( تعويم: يمين؛ الهامش: 5px 0 5px 15px؛ ) /* عناصر الوسائط m، الإطارات */ . تضمين النافذة المنبثقة، . إطار iframe منبثق (أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ عرض: كتلة ؛ هامش: تلقائي ؛ الحد الأدنى للعرض: 320 بكسل ؛ الحد الأقصى للعرض: 600 بكسل ؛ العرض: 100٪ ؛ ) . النافذة المنبثقة h2 ( /* الرأس 2 */ الهامش: 0؛ اللون: #008000؛ الحشو: 5 بكسل 0 بكسل 10 بكسل؛ محاذاة النص: لليسار؛ ظل النص: 1 بكسل 1 بكسل 3 بكسل #adadad؛ وزن الخط: 500؛ حجم الخط: 1.4em; عائلة الخط: "Tahoma" , Arial, sans-serif; النافذة المنبثقة p ( الهامش: 0 ؛ المساحة المتروكة: 5 بكسل 0 )

/* الأنماط الأساسية لطبقة التلاشي والشكل */ .overlay ( top: 0; right: 0; Bottom: 0; left: 0; z-index: 10; العرض: لا شيء; /* خلفية التلاشي */ لون الخلفية : rgba(0, 0, 0, 0.65); ) / * أنماط النوافذ المشروطة */ .popup ( الأعلى: -100%؛ اليمين: 0؛ اليسار: 50%؛ حجم الخط: 14 بكسل؛ فهرس z: 20؛ الهامش: 0؛ العرض: 85%؛ الحد الأدنى للعرض : 320 بكسل؛ نصف القطر: 4px؛ -ms-border-radius: 4px؛ الخط: 14px/18px "Tahoma"، Arial، sans-serif؛ -box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); ظل الصندوق: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -تحويل webkit: ترجمة(-50%, -500%)); -ms-transform: ترجمة(-50%, -500%); -o-تحويل: ترجمة(-50%، -500%)؛ تحويل: ترجمة (-50%، -500%)؛ -انتقال webkit: -webkit-transform 0.6s سهولة الخروج؛ -moz-transition: -moz-transform 0.6s easy-out؛ -o-transition: -o-transform 0.6s easy-out؛ الانتقال: تحويل 0.6 ثانية بسهولة؛ ) /* تنشيط الكتلة المشروطة */ .overlay:target+.popup ( -webkit-transform: ترجمة(-50%, 0); -ms-transform: ترجمة(-50%, 0); -o-transform: ترجمة (-50%, 0); تحويل: ترجمة(-50%, 0); أعلى: 20%) /* تشكيل زر الإغلاق */ .إغلاق (أعلى: -10px; يمين: -10px; العرض: 20px; الارتفاع: 20 بكسل؛ الموضع: مطلق؛ الحدود: 2 بكسل صلب #ccc; -moz-border-radius: 15px; -box-shadow: 0px 0px 10px #000؛ box-shadow: 0px 0px 10px #000؛ زخرفة النص: لا شيء؛ الخط: 13px/20px "Tahoma"، sans-serif؛ .8s؛ -ms-transition: كل سهولة .8s؛ 9)؛

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

أو ربما سيكون هذا مثيرًا للاهتمام بالنسبة لك: الإضافات:

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

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

< script type= "text/javascript" src= "http://www.youtube.com/player_api" >

باستخدام JavaScript API، يمكنك التحكم في Chromeless Player ومشغل YouTube المضمن باستخدام كود JavaScript. بالنسبة للكتلة المشروطة التي تحتوي على فيديو مضمن، سيكون ملف js القابل للتنفيذ كما يلي:

< script>لاعب فار؛ وظيفة onYouTubePlayerAPIReady() ( player = new YT.Player("player" ) ; ) $("#stop" ) . انقر(الوظيفة () ( player.stopVideo() ) )

لاعب فار؛ الوظيفة onYouTubePlayerAPIReady() ( player = new YT.Player("player"); ) $("#stop").click(function())( player.stopVideo() ))

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

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

مع كل الاحترام، أندرو

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

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

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

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

المثال الأول لنافذة مشروطة منبثقة.

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

.my_modal(position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0; الحشو:0;).my_modal:target(display:block;overflow-y:auto;).my_modal-dialog(position:relative;width:auto;margin:10px;)@media (min-width:576px)(. my_modal-dialog(max-width:460px;margin:30px auto;)).my_modal-content(position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex ;-webkit-box-orient: عمودي;-webkit-box-direction: عادي;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;background-color:#fff; - مقطع خلفية webkit: صندوق الحشو؛ مقطع الخلفية: صندوق الحشو؛ الحد: 1 بكسل صلب rgba (0،0،0،.2)؛ نصف قطر الحدود: 6 بكسل؛ المخطط التفصيلي: 0؛) @ الوسائط (دقيقة -width:768px)(.my_modal-content(-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5) ;)).my_modal-header(display:block;padding:14px 14px 4px;).my_modal-title(margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem; الخط - الوزن: 500؛ الحد السفلي: 1 بكسل صلب #d4d4d4؛).إغلاق (الحشو: 1 بكسل 5 بكسل 0؛ الحدود: 1 بكسل صلب #000؛ نصف قطر الحدود: 50%؛ الخط العائلي: بلا serif؛ حجم الخط : 24px;وزن الخط:700;ارتفاع الخط:1;اللون:#000;ظل النص:0 1px 0 #fff;التعتيم:.5;زخرفة النص:لا شيء;أعلى:4px;يمين:4px;الموضع : مطلق;).إغلاق:التركيز,.إغلاق:hover(color:#000;text-decoration:none;cursor:pointer;opacity:.75;).my_modal-body(position:relative;-webkit-box-flex : 1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;الحشو:15px;overflow:auto;) فتح نافذة مشروطة

عنوان النافذة المشروطة

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

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

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

نافذة مشروطة عند النقر على زر

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

مثال على زر لفتح نافذة مشروطة (انقر).

زر نافذة مشروط

#تراكب (الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ العرض: 100%؛ الارتفاع: 100%؛ لون الخلفية: rgba(0, 0, 0, 0.4); مؤشر z: 999; تجاوز السعة: تلقائي؛ الرؤية: مخفي؛ العتامة: 0؛ الانتقال: العتامة 0.7 ثانية بسهولة 0 ثانية؛ الحد الأدنى للعرض: 200 بكسل؛ الموضع: الحشو المطلق: 15 بكسل 20 بكسل؛ لون الخلفية: #fefefe؛ نصف القطر الحدودي: 10 بكسل؛ 0، 0، 0.4)؛ إغلاق (أعلى: 10 بكسل؛ يمين: 10 بكسل؛ العرض: 32 بكسل؛ الارتفاع: 32 بكسل؛ الموضع: مطلق؛ الحدود: لا شيء؛ لون الخلفية: rgba(0, 130, 230, 0.9); box- الظل: 0 2px 5px 0 rgba(0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); ، 255، 0.9)؛ المحتوى: "X"؛ عائلة الخط: Arial، Helvetica، sans-serif؛ ظل النص: 0 -1px rgba(0, 0, 0, 0.9); ) .إغلاق:تحويم ( لون الخلفية: rgba(180, 20, 14, 0.8); ) #overlay .popup p.zag(margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size: 16 بكسل؛ وزن الخط: غامق؛ الحد السفلي: 1 بكسل طماطم صلبة؛)

ثم انسخ والصق كود html الخاص بالنافذة المشروطة:

نافذة مشروطة

المعلومات النصية الأولى...

معلومات النص الثاني...

متابعة المعلومات النصية...

نافذة مشروطة

وأخيرًا، اكتب قبل البرنامج النصي للاتصال وإغلاق النافذة المشروطة:

var b = document.getElementById("overlay"); وظيفة swa())( b.style.visibility = "visible"; b.style.opacity = "1"; b.style.transition = "كل 0.7 ثانية 0 ثانية"; ) وظيفة swa2())( ب .style .visibility = "hidden"; b.style.opacity = "0";

شارك مع الأصدقاء واطرح الأسئلة إذا لم ينجح شيء ما عند إنشاء نافذة مشروطة.

سنتعلم في هذا البرنامج التعليمي كيفية إنشاء نافذة مشروطة باستخدام HTML5 وCSS3. في هذا البرنامج التعليمي، لن نستخدم JS، بل فقط CSS3 الكامل. يمكن استخدام النوافذ المشروطة لنماذج التعليقات والصور ومقاطع الفيديو، وهناك العديد من الخيارات الأخرى لاستخدامها.

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

الخطوة 1: ترميز HTML

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

الخطوة 2. محتويات النافذة المشروطة

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

مشروع ريدستار

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

الخطوة 3. الأنماط

الآن لنبدأ في كتابة الأنماط لنافذتنا. في هذه الخطوة سنجعل نافذتنا غير مرئية. وسوف تظهر فقط عند النقر على الرابط. للقيام بذلك، نكتب أنماطًا لفئة modalDialog الخاصة بنا:

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

الخطوة 4. الوظائف والعرض

في هذه الخطوة سوف نتأكد من أن نافذتنا تعمل بالفعل. للقيام بذلك، دعونا نضيف المزيد من الأنماط لفئة modalDialog الخاصة بنا:

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

في هذه الخطوة، يمكنك بالفعل عرض نافذتك، فهي تعمل بالفعل. لكن زر الإغلاق لا يبدو لطيفًا جدًا.

الآن نحن بحاجة إلى إضافة أنماط لفصلنا القريب.

الخطوة 5. عمل زر الإغلاق

في هذه الخطوة سنقوم بتحسين مظهر الزر الخاص بنا، والذي سيغلق نافذتنا. للقيام بذلك، نكتب أنماطًا لفصلنا القريب:

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

حسنًا، الآن يبدو الزر الخاص بنا بالطريقة المقصودة. يجب أن يبدو مثل هذا بالنسبة لك:

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

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

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

يجعل HTML5 وCSS3 من السهل جدًا إنشاء نوافذ مشروطة.

ترميز HTML

الخطوة الأولى نحو إنشاء نافذة مشروطة هي ترميز بسيط وفعال:

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

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

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

مثال على نافذة مشروطة بسيطة يمكن إنشاؤها باستخدام CSS3.

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

الأنماط

إنشاء فصل دراسي modalDialogوالبدء في تشكيل المظهر:

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

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

ستتمتع الخلفية بشفافية طفيفة وسيتم وضعها أيضًا فوق جميع العناصر الأخرى من خلال استخدام الخاصية مؤشر z.

أخيرًا، قمنا بتعيين التحولات لعرض نافذتنا المشروطة وإخفائها في حالة غير نشطة.

ربما كنت لا تعرف الممتلكات أحداث المؤشر، ولكنه يسمح لك بالتحكم في كيفية تفاعل العناصر مع نقرات الماوس. قمنا بتعيين القيمة على قيمتها للفئة modalDialog، نظرًا لأن الارتباط يجب ألا يستجيب لنقرات الماوس عندما تكون الفئة الزائفة نشطة ":هدف".

الآن نضيف فئة زائفة :هدفوأنماط النافذة المشروطة.

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

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

نحدد عرض النافذة المشروطة وموضعها على الصفحة. نحدد أيضًا تدرجًا للخلفية والزوايا الدائرية.

إغلاق النافذة

الآن نحن بحاجة إلى تنفيذ وظيفة إغلاق النافذة. تشكيل مظهر الزر:

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