الصفحة الرئيسية / النصيحة/ نافذة منبثقة بسيطة في html و css. مشروط CSS

نافذة منبثقة بسيطة في html و css. مشروط CSS

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

لنبدأ في إنشاء نافذة مشروطة لدينا.

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

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

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

الآن دعنا نضيف محتوى نافذتنا نفسها. دعنا نصنع عنوانًا وبعض النصوص ونضعها كلها في علامة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيفية إنشاء نموذج بسيط منبثقة

لنبدأ في فحص رمز أبسط نافذة مشروطة ستظهر على الفور
كود jQuery

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

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

قم باستدعاء نافذة jQuery modal بالرجوع إلى CSS

الخطوة التالية هي الإنشاء نافذة مشروطةعند النقر على الرابط. ستغمق الخلفية ببطء.

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

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

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

نص مشروط

قريب

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

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

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

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

كود JQuery

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

تم التحديث: 27.10.2017

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

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

حسنًا ، الآن دعنا ننتقل مباشرة إلى التخطيط نفسه. كود أتش تي أم ألوتصميم إطارنا النموذجي باستخدام 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= "your-picture.jpg" alt = "" />< a class = "close" title= "قريب" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "your-picture.jpg" alt = "" />< a class = "close" title= "قريب" href= "#close" >

افتح النافذة 1 افتح النافذة 2 فيديو في النافذة 3 صورة في النافذة 4

في مثال الكود أعلاه ، من أجل الوضوح ، كتبت تفسيرات موجزة في حاويات النوافذ المشروطة. يبقى لك بالقياس ، في حاوية 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 ؛ الخلفية: #fefefe ؛ / * زوايا التقريب * /- webkit- الحدود- نصف القطر: 4 بكسل ؛ - موز - الحد - نصف القطر: 4 بكسل ؛ - ms- الحد - نصف القطر: 4 بكسل ؛ الحد - نصف القطر: 4 بكسل ؛ الخط: 14px / 18px "Tahoma"، Arial، sans- serif؛ / * الظل الخارجي * / - webkit-box-shadow: 0 15px 20px rgba (0، 0، 0، .22)، 0 19px 60px rgba (0، 0، 0، .3) ؛ - moz- box- الظل: 0 15px 20px rgba (0، 0، 0، .22)، 0 19px 60px rgba (0، 0، 0، .3) ؛ - ms- box- الظل: 0 15px 20px rgba (0، 0، 0، .22)، 0 19px 60px rgba (0، 0، 0، .3) ؛ box- ظل: 0 15px 20px rgba (0، 0، 0، .22)، 0 19px 60px rgba (0، 0، 0، .3) ؛ - webkit- التحويل: ترجم (-50٪ ، -500٪) ؛ - تحويل مللي ثانية: ترجمة (-50٪ ، -500٪) ؛ - تحويل: ترجم (-50٪ ، -500٪) ؛ تحويل: ترجمة (- 50٪ ، - 500٪) ؛ - webkit-transfer: - webkit-transform 0.6s easy-out ؛ - moz- الانتقال: - moz- سهولة تحويل 0.6s ؛ - o- الانتقال: - o- التحويل 0. 6s سهولة الخروج ؛ الانتقال: تحويل 0.6s بسهولة الخروج ؛ ) / * تنشيط الكتلة المشروطة * /... تراكب: الهدف +. منبثقة (- webkit- تحويل: ترجمة (- 50٪ ، 0) ؛ - تحويل ms-: ترجمة (- 50٪ ، 0) ؛ - o- تحويل: ترجمة (- 50٪ ، 0) ؛ تحويل: ترجمة (- 50٪ ، 0) ٪ ، 0) ؛ أعلى: 20٪ ؛) / * تشكيل زر اغلاق * /... إغلاق (أعلى: - 10 بكسل ؛ يمين: - 10 بكسل ؛ عرض: 20 بكسل ؛ ارتفاع: 20 بكسل ؛ الموضع: مطلق ؛ الحشو: 0 ؛ الحد: 2 بكسل صلب #ccc ؛ - webkit- الحدود- نصف القطر: 15 بكسل ؛ - moz- الحدود- نصف القطر : 15 بكسل ؛ - مللي ثانية - الحد - نصف القطر: 15 بكسل ؛ - س - الحد - نصف القطر: 15 بكسل ؛ الحد - نصف القطر: 15 بكسل ؛ الخلفية - اللون: rgba (61 ، 61 ، 61 ، 0.8) ؛ - webkit- مربع- الظل: 0 بكسل 0px 10px # 000؛ - moz-box-shadow: 0px 0px 10px # 000؛ box-shadow: 0px 0px 10px # 000؛ text- align: center؛ text- decoration: none؛ font: 13px / 20px "Tahoma"، Arial ، sans- serif؛ font- weight: bold؛ - webkit- الانتقال: all easy.8s؛ - moz- الانتقال: all easy.8s؛ - ms- transfer: all easy.8s؛ - o- transfer: all easy.8s ؛ الانتقال: كل easy.8s ؛). إغلاق: قبل (اللون: rgba (255 ، 255 ، 255 ، 0.9) ؛ المحتوى: "X" ؛ ظل النص: 0-1 بكسل rgba (0 ، 0 ، 0 ، 0.9) ؛ حجم الخط: 12 بكسل ؛). إغلاق: تحوم (الخلفية- اللون: rgba (252 ، 20 ، 0 ، 0.8) ؛ - webkit- التحويل: تدوير (360 درجة) ؛ - moz- التحويل: تدوير (360 درجة) ؛ - ms- التحويل: تدوير (360 درجة) ؛ - o- تحويل: تدوير (360 درجة) ؛ تحويل: تدوير (360 درجة) ؛) / * الصور داخل النافذة * /... المنبثقة img (العرض: 100٪ ؛ الارتفاع: تلقائي ؛) / * الصور المصغرة يسار / يمين * /... الموافقة المسبقة عن علم- اليسار. الموافقة المسبقة عن علم- يمين (العرض: 25٪ ؛ الارتفاع: تلقائي ؛). الموافقة المسبقة عن علم- يسار (عائم: يسار ؛ الهامش: 5 بكسل 15 بكسل 5 بكسل 0 ؛). الموافقة المسبقة عن علم - يمين (عائم: يمين ؛ الهامش: 5 بكسل 0 5 بكسل 15 بكسل ؛) / * عناصر الوسائط المتعددة ، الإطارات * /... منبثقة تضمين. إطار iframe المنبثق (أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ عرض: كتلة ؛ هامش: تلقائي ؛ الحد الأدنى للعرض: 320 بكسل ؛ أقصى عرض: 600 بكسل ؛ العرض: 100٪ ؛). popup h2 (/ * العنوان 2 * / margin: 0؛ color: # 008000؛ padding: 5px 0px 10px؛ text- align: left؛ text- shadow: 1px 1px 3px #adadad؛ font- weight: 500؛ font- size: 1.4em ؛ الخط- العائلة: "Tahoma" ، Arial ، sans- serif ؛ ارتفاع السطر: 1.3 ؛) / * الفقرات * /. منبثقة ص (الهامش: 0 ؛ المساحة المتروكة: 5 بكسل 0)

/ * أنماط التعتيم الأساسية والطبقة المشروطة * /. (0 ، 0 ، 0 ، 0.65) ؛ الموضع: ثابت ؛ / * تحديد الموضع الثابت * / المؤشر: افتراضي ؛ / * نوع المؤشر * /) / * تنشيط طبقة التظليل * /. overlay: target (display: block؛) / * أنماط مشروطة * / .popup (أعلى: -100٪ ؛ يمين: 0 ؛ يسار: 50٪ ؛ حجم الخط: 14 بكسل ؛ مؤشر z: 20 ؛ الهامش: 0 ؛ العرض: 85٪ ؛ الحد الأدنى للعرض: 320 بكسل ؛ أقصى عرض: 600 بكسل ؛ / * تحديد الموضع الثابت ، النافذة مستقرة عند التمرير * / الموضع: ثابت ؛ الحشو: 15 بكسل ؛ الحد: 1 بكسل صلب # 383838 ؛ الخلفية: # fefefe ؛ / * الزوايا الدائرية * / -webkit-border-radius : 4 بكسل ؛ -moz-border-radius: 4px ؛ -ms-border-radius: 4px ؛ نصف قطر الحدود: 4 بكسل ؛ الخط: 14 بكسل / 18 بكسل "Tahoma" ، Arial ، sans-serif ؛ / * الظل الخارجي * / -webkit -box-shadow: 0 15px 20px rgba (0،0،0، .22)، 0 19px 60px rgba (0،0،0، .3) ؛ -moz-box-shadow: 0 15px 20px rgba (0،0 ، 0 ، .22) ، 0 19 بكسل 6 0 بكسل 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- تحويل: ترجمة (-50٪ ، -500٪) ؛ -o-تحويل: ترجمة (-50٪ ، -500٪) ؛ تحويل: ترجمة (-50٪ ، -500٪) ؛ -انتقال مجموعة الويب: -تحويل مجموعة الويب 0.6 s سهولة الخروج ؛ -موز-الانتقال: -موز-تحويل 0.6s سهولة الخروج ؛ -أو-انتقال: -o-تحويل 0.6s سهولة الخروج ؛ الانتقال: تحويل 0.6s بسهولة الخروج ؛ ) / * تفعيل الكتلة المشروطة * / .overlay: target + .popup (-webkit-transform: translate (-50٪، 0)؛ -ms-transform: translate (-50٪، 0)؛ -o-transform: ترجمة (-50٪ ، 0) ؛ تحويل: ترجمة (-50٪ ، 0) ؛ أعلى: 20٪ ؛) / * تشكيل زر الإغلاق * /. إغلاق (أعلى: -10 بكسل ؛ يمين: -10 بكسل ؛ عرض: 20 بكسل ؛ الارتفاع: 20 بكسل ؛ الموضع: مطلق ؛ الحشو: 0 ؛ الحد: 2 بكسل صلب #ccc ؛ -مجموعة الويب-الحدود-نصف القطر: 15 بكسل ؛ -moz-border-radius: 15px ؛ -ms-border-radius: 15px ؛ -o- نصف قطر الحدود: 15 بكسل ؛ نصف قطر الحد: 15 بكسل ؛ لون الخلفية: rgba (61 ، 61 ، 61 ، 0.8) ؛ -webkit-box-shadow: 0px 0px 10px # 000 ؛ -moz-box-shadow: 0px 0px 10px # 000؛ box-shadow: 0px 0px 10px # 000؛ text-align: center؛ text-decoration: none؛ font: 13px / 20px "Tahoma"، Arial، sans-serif؛ font-weight: bold؛ -webkit-transfer . : rgba (255، 255، 255، 0. تسع)؛ المحتوى: "X" ؛ ظل النص: 0-1 بكسل rgba (0 ، 0 ، 0 ، 0.9) ؛ حجم الخط: 12 بكسل ؛ ). close: hover (background-color: rgba (252، 20، 0، 0.8) ؛ -webkit-transform: rotate (360deg) ؛ -moz-transform: rotate (360deg) ؛ -ms-convert: rotate (360deg)) ؛ -o-convert: rotate (360deg) ؛ التحويل: تدوير (360deg) ؛) / * الصور داخل النافذة * / .popup img (العرض: 100٪ ؛ الارتفاع: تلقائي ؛) / * الصور المصغرة اليسرى / اليمنى * /. الموافقة المسبقة عن علم-اليسار ، .pic-right (العرض: 25٪ ؛ الارتفاع: تلقائي ؛) .pic-left (عائم: يسار ؛ الهامش: 5 بكسل 15 بكسل 5 بكسل 0 ؛) .pic-right (عائم: يمين ؛ هامش: 5 بكسل 0 5 بكسل 15px ؛) / * عناصر الوسائط المتعددة ، الإطارات * / .popup embed ، .popup iframe (أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ شاشة العرض: كتلة ؛ هامش: تلقائي ؛ عرض الحد الأدنى: 320 بكسل ؛ max-width: 600px؛ width: 100٪؛) .popup h2 (/ * العنوان 2 * / margin: 0؛ color: # 008000؛ padding: 5px 0px 10px؛ text-align: left؛ text-shadow: 1px 1px 3px #adadad؛ font-weight: 500؛ font-size: 1.4em؛ font-family: "Tahoma"، Arial، sans-serif؛ ارتفاع السطر: 1.3؛) / * الفقرات * / .popup p (الهامش: 0 ؛ الحشو: 5 بكسل 0)

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

أو ربما يكون الأمر ممتعًا بالنسبة لك:

المكملات:

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

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

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

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

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

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

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

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

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

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

عادةً ما تحتوي شفرة HTML المنبثقة على الهيكل التالي:

class = "popup__overlay">

- انبثاق مع المحتوى ->

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

Popup__overlay (
الموقف: ثابت ؛
اليسار: 0؛
أعلى: 0؛
الخلفية: # 000 ؛
العتامة: .5 ؛
عامل التصفية: ألفا (عتامة = 50) ؛
الفهرس z: 999
}
.يظهر فجأة (
الموقف: مطلق.
العرض: 20٪؛
مؤشر z: 1000 ؛
الحدود: 1px صلب #ccc ؛
الخلفية: #fff
}

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

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

هذا ما سنفعله.

سأقدم أدناه مثالاً على نافذة منبثقة تعمل في جميع الإصدارات الرئيسية من المتصفحات الرئيسية. لجعلها تعمل بشكل صحيح في IE<9 необходима некоторая экстра-разметка и хаки, потому детальное описание написания такого метода я опущу, а для интересующихся выложу полную версию.

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

لنبدأ بكود HTML. سيختلف هيكلها قليلاً عن الكود المشار إليه أعلاه ، لماذا - المزيد حول هذا أدناه في المقالة ؛ ستبقى فئات العناصر كما هي:

< div class ="popup__overlay">
< div class ="popup">

وبعض CSS:

Popup__overlay (
الموقف: ثابت ؛
اليسار: 0؛
أعلى: 0؛
العرض: 100٪؛
الارتفاع: 100٪؛
الفهرس z: 999
}
.يظهر فجأة (
}

مقاسات ثابتة

أسهل خيار. لست بحاجة إلى ابتكار أي شيء جديد:

يظهر فجأة (
اليسار: 50٪؛
أعلى: 50٪؛
العرض: 400 بكسل ؛
الارتفاع: 200 بكسل ؛
الهامش الأيسر: -200 بكسل ؛
أعلى الهامش: -100 بكسل
}

الهوامش السلبية لنصف العرض والارتفاع تافهة ومملة ، ولا شيء أصلي في ذلك.

تعتمد أحجام النوافذ المنبثقة على المحتوى

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

يظهر فجأة (
الهامش: تلقائي
}

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

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

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

Popup__overlay (
الموقف: ثابت ؛
اليسار: 0؛
أعلى: 0؛
العرض: 100٪؛
الارتفاع: 100٪؛
مؤشر z: 999 ؛
محاذاة النص: وسط
}
.يظهر فجأة (
عرض: مضمنة-كتلة.
محاذاة عمودية: وسط
}

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

Popup__overlay: بعد (
عرض: مضمنة-كتلة.
العرض: 0؛
الارتفاع: 100٪؛
محاذاة عمودية: وسط ؛
المحتوى: ""
}

يبقى لإضافة تراكب شبه شفاف - ستتعامل rgba مع هذا. كل شىء! الآن يتم التحكم في موضع النافذة المنبثقة فقط بواسطة المتصفح على مستوى CSS.

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

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

يتيح لك HTML5 و CSS3 إنشاء نماذج بسهولة غير عادية.

ترميز HTML

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

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

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

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

نافذة مشروطة

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

يمكن استخدامه على نطاق واسع ، من عرض الرسائل إلى نموذج التسجيل.

الأنماط

أنشئ فصلًا دراسيًا مشروطونبدأ في تشكيل المظهر:

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

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

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

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

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

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

ModalDialog: target (display: block؛ pointer-events: auto؛). ModalDialog> div (width: 400px؛ position: النسبي؛ margin: 10٪ auto؛ padding: 5px 20px 13px 20px؛ border-radius: 10px؛ background: # fff ؛ الخلفية: -moz-linear-gradient (#fff، # 999)؛ background: -webkit-linear-gradient (#fff، # 999)؛ background: -o-linear-gradient (#fff، # 999)؛ )

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

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

أغلق النافذة

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

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