مدخلنافذة مشروطة مع نموذج المغلق. كيفية إنشاء نافذة مشروطة في HTML5 و CSS3
في هذا الدرس ، لن أكشف سراً لمصممي التخطيط المتمرسين ومعلمي css ، ولكن هذه المقالة ستكون مفيدة للمبتدئين. هذا هو المكان الذي يمكنك فيه معرفة كيفية إنشاء نوافذ منبثقة أعلى موقعك بالكامل.في أغلب الأحيان ، تظهر هذه النوافذ بعد تنفيذ إجراءات معينة على الموقع ، على سبيل المثال ، ينقر المستخدم على رابط "طلب معاودة الاتصال" وينبثق نموذج طلب أمامه.
من الملائم جدًا استخدام نوافذ PopUp جنبًا إلى جنب مع ajax ، ولكن هذا موضوع لدرس آخر.
بدأت المزيد والمزيد من موارد الويب في الظهور على الويب التي تستخدم النوافذ المنبثقة المنبثقة. الجميع يعرف كمثال. الشبكات الاجتماعية... تمت إزالة جميع البيانات غير الضرورية من لقطات الشاشة.
في تواصل مع
موقع التواصل الاجتماعي الفيسبوك
تويتر
أعتقد أن هناك أسبابًا كافية لبدء دراسة السؤال: كيفية إنشاء نافذة منبثقة على موقعك.
بيان المشكلة (TOR)
تحتاج إلى إنشاء نافذة منبثقة بها شاشة تعتيم أعلى الموقع بالكامل.المحلول
طريقة 1
لغة البرمجة
المغلق
* (font-family: Areal؛) .b-container (width: 200px؛ height: 150px؛ background-color: #ccc؛ margin: 0px auto؛ padding: 10px؛ font-size: 30px؛ color: #fff؛) .b-popup (العرض: 100٪ ؛ الارتفاع: 2000 بكسل ؛ لون الخلفية: rgba (0،0،0،0.5) ؛ تجاوز: مخفي ؛ الموضع: ثابت ؛ أعلى: 0 بكسل ؛) .b-popup .b-popup -content (margin: 40px auto 0px auto؛ width: 100px؛ height: 40px؛ padding: 10px؛ background-color: # c5c5c5؛ border-radius: 5px؛ box-shadow: 0px 0px 10px # 000؛)نتيجة:
في كثير من الأحيان يُقترح استخدام:
الموقف: مطلق.
نعم ، النتيجة واحدة ، ولكن نظرًا لحقيقة أننا قمنا بتعيين ارتفاع كتلة "التظليل" ، تظهر أشرطة التمرير. هذا هو السبب في أن هذه الطريقة ليست مناسبة.
الطريقة الثانية
لا تختلف هذه الطريقة بشكل كبير عن الطريقة الأولى ، لكنني أجدها أكثر ملاءمة.Html (بدون تغيير)
Css
* (font-family: Areal؛) .b-container (width: 200px؛ height: 150px؛ background-color: #ccc؛ margin: 0px auto؛ padding: 10px؛ font-size: 30px؛ color: #fff؛) .b-popup (العرض: 100٪ ؛ الحد الأدنى للارتفاع: 100٪ ؛ لون الخلفية: rgba (0،0،0،0.5) ؛ تجاوز: مخفي ؛ الموضع: ثابت ؛ أعلى: 0 بكسل ؛) .b-popup. b-popup-content (margin: 40px auto 0px auto؛ width: 100px؛ height: 40px؛ padding: 10px؛ background-color: # c5c5c5؛ border-radius: 5px؛ box-shadow: 0px 0px 10px # 000؛)النتيجة متشابهة
بفضل الخاصية: الحد الأدنى للارتفاع: 100٪ ؛اكتسبت كتلة "التعتيم" لدينا عرضًا بنسبة 100٪ و أدنى ارتفاعفي 100٪ من الشاشة.العيب الوحيد في هذه الطريقة هو أن متصفح الانترنتيدعم هذه الخاصية فقط منذ الإصدار 8.0.
إضافة السحر إلى Jquery
الآن دعنا نضيف روابط لإخفاء / إظهار النافذة المنبثقة.للقيام بذلك ، تحتاج إلى توصيل مكتبة JQuery وبرنامج نصي صغير:
يجب أيضًا تحديث Html:
نتيجة
الآن ، عند تحميل الصفحة ، ستختفي النافذة المنبثقة.يمكنك أن ترى النتيجة هنا.
مرحبًا بالجميع ، سأخبركم عن شيء واحد مناسب جدًا يسمى نافذة مشروطة، سنكتشف كيفية عمل نافذة مشروطة؟ لا يفهم الكثيرون ما هو عليه ، سأحاول شرحه بلغة تفهمها ، بمعنى آخر - هذه نافذة منبثقة عند النقر فوق زر أو نص.
داخل هذه النافذة ، يمكن أن يكون هناك أي معلومات (فيديو ، صورة ، رمز ، إلخ.) لقد بدأت الآن في استخدام النافذة المشروطة أكثر ، حيث توجد بعض المواد التي يجب قبولها حتى لا يتم عرضها على الصفحة ، ولكن لنفترض أنه كانت هناك صورة ، عندما تضغط عليها ، تنبثق نافذة مع معلومات.
لقد قمت بذلك مؤخرًا على موقع واحد ، وأدخلت صورة على الصفحة الرئيسية ، ولا حتى صورة بل لقطة شاشة من مقطع فيديو على YouTube ، وعندما نقرت ، تنبثق نافذة حيث تعرض الفيديو. يمكن رؤية مثال لهذه النافذة على صفحتي مع اللعبة ، والمبدأ هو نفسه ، عند النقر فوق الصورة ، تنبثق نافذة بها اللعبة. لقد فعلت ذلك لأن توسيع اللعبة أوسع من عمود المحتوى الخاص بي ، لذلك وجدت طريقة للخروج من الموقف.
ضع في اعتبارك نافذة مشروطة في css ، حتى لا نخدع رؤوسنا ، سنستخدم الأنماط ، أي أنه يكتب أنماطًا في الملف الرئيسي والكود في نافذتنا ، وسننظر في كل شيء بالتفصيل ، وماذا وكيف.
نافذة مشروطة في المغلق ، كيفية عمل نافذة مشروطة
أول شيء نحتاجه هو الأنماط ، انسخ الكود بالكامل مع الأنماط الموجودة أدناه والصقه في ملف النمط الرئيسي الخاص بك ، أي في style.css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | ... النافذة (الموضع: ثابت ؛ عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛ أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ الخلفية: rgba (0 ، 0 ، 0 ، 0.7) ؛ z- index : 99999 ؛ - Webkit-transfer: عتامة 400 مللي ثانية بسهولة ؛ - انتقال moz: عتامة 400 مللي ثانية ؛ الانتقال: عتامة 400 مللي ثانية سهولة في ؛ العرض: لا شيء ؛ أحداث المؤشر: لا شيء ؛). النافذة: الهدف (العرض: الحظر ؛ أحداث المؤشر: تلقائي ؛). Window> div (العرض: 460 بكسل ؛ الموضع: نسبي ؛ الهامش: 10٪ تلقائي ؛ الحشو: 30 بكسل 10 بكسل 10 بكسل ؛ نصف قطر الحد: 10 بكسل ؛ الخلفية: #fff ؛ مربع الظل: 0 بكسل 0 بكسل 20 بكسل 2 بكسل ؛). إغلاق (الخلفية: # cc3300 ؛ اللون: #FFFFFF ؛ ارتفاع الخط: 25 بكسل ؛ الموضع: مطلق ؛ اليمين: - 12 بكسل ؛ محاذاة النص: المركز ؛ أعلى: - 10 بكسل ؛ العرض: 24 بكسل ؛ النص - الزخرفة: لا شيء ؛ الخط- الوزن: غامق ؛ - webkit- الحدود- نصف القطر: 12 بكسل ؛ - moz- الحدود- نصف القطر: 12 بكسل ؛ الحد - نصف القطر: 12 بكسل ؛ - moz- box- الظل: 1px 1px 3px # 000 ؛ - webkit- box- shadow: 1px 1px 3px # 000 ؛ box-shadow: 1px 1px 3px # 000 ؛). إغلاق: تحوم (الخلفية: # 990000 ؛) |
نافذة (الموضع: ثابت ؛ عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛ أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ الخلفية: rgba (0،0،0،0.7) ؛ z-index : 99999 ؛ -webkit-transfer: عتامة 400 مللي ثانية سهولة في ؛ -موز-انتقال: عتامة 400 مللي ثانية سهولة في ؛ الانتقال: عتامة 400 مللي ثانية سهولة في العرض: لا شيء ؛ أحداث المؤشر: لا شيء ؛) النافذة: الهدف (عرض : block؛ pointer-events: auto؛). Window> div (العرض: 460 بكسل ؛ الموضع: نسبي ؛ الهامش: 10٪ تلقائي ؛ الحشو: 30 بكسل 10 بكسل 10 بكسل ؛ نصف قطر الحد: 10 بكسل ؛ الخلفية: #fff ؛ ظل الصندوق: 0px 0px 20px 2px؛). close (background: # cc3300؛ color: #FFFFFF؛ line-height: 25px؛ position: مطلق؛ right: -12px؛ text-align: center؛ top: -10px؛ width: 24px؛ text -الديكور: لا شيء ؛ وزن الخط: غامق ؛ -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: # 990000؛)
حفظ ، يمكنك اللعب بالأنماط ، وجعل شيء أكثر جمالا ، وتغيير الخلفية ، وإنشاء إطار آخر ، وما إلى ذلك. انتقل إلى الصفحة التي تريد أن تظهر فيها هذه النافذة ، والصق الكود التالي:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" >زر < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "قريب" class = "close" >Xمحتويات النافذة ستكون هنا |
زر
الآن دعنا نحلل قليلاً ما بداخلها ، تحتاج إلى تغييرها. أين هو مكتوب بها "زر"هناك يمكنك إدراج ، مثل صورة ونص ، كل ما تريد ، أي عند النقر فوقه ، سيتم فتح نافذة. أين هو مكتوب "محتويات النافذة ستكون هنا"أدخل ما تود رؤيته في النافذة المنبثقة ، هذا كل شيء في الأساس.
الإخبارية!
حسنًا ، في أخبار المتابعة ، كما هو الحال دائمًا ، أصبحت متكررًا مع الأخبار بالفعل)) جعلت لنفسي صفحة صغيرة بها إنضم لبرنامج، في النموذج ، سأقوم بمسح الجميع ليذهبوا إليه ويروا ، ربما يقدم شخص ما بعض النصائح الأكثر إثارة للاهتمام ، على سبيل المثال ، لإضافة شيء ، حسنًا ، أنت تعرف ما أتحدث عنه. لا تزال هناك بعض الأفكار عنها ، لإضافة فيديو معي ، ربما تعليمات ، حسنًا ، شيء من هذا القبيل ، بشكل عام ، أنا في انتظار تعليق منك!
مرة أخرى ، أنتقل إلى موضوع إنشاء نوافذ مشروطة (منبثقة). في الآونة الأخيرة ، أصبحت مهتمًا بشكل متزايد بالتقنيات المختلفة لتنفيذ النوافذ المنبثقة ، دون استخدام جافا سكريبت ، ملحقات jQueryإلخ. من الأمور ذات الأهمية الأكبر إمكانية تطبيق أنماط نظيفة والإمكانيات التي لا تنضب لميزات CSS3 الجديدة.
بناءً على تطورات بعض البرجوازية المحترمة ، فهم رجال ماكرون في هذا الصدد ، يتم الحصول على نتائج جيدة من حيث إنشاء نوافذ نموذجية باستخدام CSS3. المهمة ، أولاً وقبل كل شيء ، هي تحقيق توافق أكثر أو أقل استقرارًا عبر المستعرضات للنتيجة النهائية ، وبالطبع ، بأقل خسارة ، لتقليل المبلغ الإجمالي للكود ، في كل من HTML و CSS ، من أجل جعل الحياة أسهل لمنشئي مواقع الويب الذين طالت معاناتهم.
ماذا يحدث في النهاية ، لدي في هذا الصدد اليوم ، سنرى معكم ، وفي نفس الوقت ، ونتعلم كيف نصنع نوافذ مشروطة منبثقة باستخدام "السحر" لـ CSS3.
بادئ ذي بدء ، يمكن لجميع المهتمين بهذا الموضوع إلقاء نظرة على مثال لكيفية عمل النوافذ المشروطة في إصدارات مختلفة وتنزيل المصادر:
لا يستحق أخذ هذا الدرس، كدليل للعمل ، لأنه في هذه المرحلة كان من الممكن تحقيق دعم واثق فقط في المتصفحات الحديثة ( IE 9+ و Firefox و Safari و Opera و Chrome). مع التركيز على حقيقة أن الإصدارات القديمة من متصفح IE لا تزال تحظى بشعبية كبيرة بين المستخدمين ، أوصي بالنظر إلى هذه المقالة على أنها نوع من التجربة ، وإثبات لإمكانيات CSS3.
حسنًا ، الآن دعنا ننتقل مباشرة إلى التخطيط نفسه. كود أتش تي أم ألوتصميم إطارنا النموذجي باستخدام css3)))
الخطوة 1. HTML
أولاً ، دعنا ننشئ ملفًا أساسيًا ترميز HTML... كما ترى ، فإن البناء الأساسي بسيط للغاية إذا أخذنا في الاعتبار ترميز html للوسائط والأزرار (الروابط) لتنشيطها. كل نافذة مشروطة ليست أكثر من حاوية قياسية
افتح النافذة 1 افتح النافذة 2 فيديو في النافذة 3 صورة في النافذة 4
عنوان
أدخل الفيديو الخاص بك هنا أو من أي مورد طرف ثالثو YouTube و Vimeo وما إلى ذلك (iframe ، embed) ...
في مثال الكود أعلاه ، من أجل الوضوح ، كتبت تفسيرات موجزة في حاويات النوافذ المشروطة. يبقى لك بالقياس ، في حاوية divنافذة منبثقة ، ضع أيًا من المحتوى الخاص بك ، سواء كان ذلك نصًا بسيطًا أو صورًا أو مقاطع فيديو من أي مورد تابع لجهة خارجية أو YouTube أو Vimeo ، إلخ. روابط لاستدعاء النوافذ المشروطة ، يمكنك عمل نص ، أو يمكنك تصميمها في شكل أزرار متدرجة رائعة ، كما في المثال.
الخطوة 2. CSS
الخطوة التالية ، هذه هي الأكثر إثارة للاهتمام ، من المهم إعداد جميع الأنماط اللازمة لترتيب النافذة النموذجية الخاصة بنا مظهر خارجيوإضافة وظائف. لقد حذفت أنماط الصفحة الأساسية حتى لا يتم الخلط بينها ، وأضفت بعض التعليقات مع التعليقات للتوضيح:
/ * أنماط التعتيم الأساسية والطبقة المشروطة * /. (0 ، 0 ، 0 ، 0.7) ؛ التعتيم: 0 ؛ الموضع: ثابت ؛ / * تحديد الموضع الثابت * / المؤشر: افتراضي ؛ / * نوع المؤشر * / -webkit-transfer: opacity .5s ؛ -moz- الانتقال: العتامة. 5 ثوانٍ ؛ -ms-انتقالي: عتامة .5 ثانية ؛ -o-انتقالي: عتامة .5 ثانية ؛ انتقال: عتامة .5 ثانية ؛) تراكب: هدف (رؤية: مرئي ؛ عتامة: 1 ؛) .is-image (أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ يسار: 0 ؛ عرض: كتلة ؛ هامش: تلقائي ؛ عرض: 100٪ ؛ ارتفاع: تلقائي ؛ / * تقريب زوايا الصور المضمنة * / -webkit-border-radius: 4px ؛ -moz - نصف قطر الحد: 4 بكسل ؛ -ms-border-radius: 4px ؛ نصف قطر الحد: 4 بكسل ؛) / * عناصر الوسائط المتعددة المضمنة ، الإطارات * / التضمين ، iframe (أعلى: 0 ؛ يمين: 0 ؛ أسفل: 0 ؛ اليسار: 0 ؛ العرض: الكتلة ؛ الهامش: تلقائي ؛ الحد الأدنى للعرض: 320 بكسل ؛ الحد الأقصى للعرض: 600 بكسل ؛ العرض: 100٪ ؛) .popup h1 (/ * العنوان 1 * / اللون: # 008000 ؛ محاذاة النص: يسار ؛ ظل النص: 0 1p × 3 بكسل rgba (0،0،0 ، .3) ؛ الخط: 24 بكسل "Trebuchet MS"، Helvetica، sans-serif؛ وزن الخط: عريض ؛ ) .popup h2 (/ * العنوان 2 * / color: # 008000؛ text-align: left؛ text-shadow: 0 1px 3px rgba (0،0،0، .3)؛ font: 22px "Trebuchet MS"، Helvetica ، sans-serif؛) / *** نماذج نافذة مشروطة *** / .popup (أعلى: 0 ؛ يمين: 0 ؛ يسار: 0 ؛ حجم الخط: 14 بكسل ؛ z-index: 10 ؛ العرض: block ؛ الرؤية : مخفي ؛ الهامش: 0 تلقائي ؛ العرض: 90٪ ؛ الحد الأدنى للعرض: 320 بكسل ؛ الحد الأقصى للعرض: 600 بكسل ؛ / * تحديد الموضع الثابت ، تكون النافذة مستقرة عند التمرير * / الموضع: ثابت ؛ الحشو: 15 بكسل ؛ الحد: 1 بكسل صلبة # 383838 ؛ / * تقريب الزوايا * / -webkit-border-radius: 4px ؛ -moz-border-radius: 4px ؛ -ms-border-radius: 4px ؛ نصف قطر الحدود: 4px ؛ لون الخلفية: #FFFFFF ؛ / * ظل الصندوق الخارجي * / -webkit-box-shadow: 0 0 6px rgba (0، 0، 0، 0.8)؛ -moz-box-shadow: 0 0 6px rgba (0، 0، 0، 0.8)؛ - ms-box -shadow: 0 0 6px rgba (0، 0، 0، 0.8)؛ -o-box-shadow: 0 0 6px rgba (0، 0، 0، 0.8)؛ box-shadow: 0px 0px 6px rgba ( 0 ، 0 ، 0 ، 0.8) ؛ / * شفافية النافذة الكاملة ، تظهر عند النقر * / التعتيم: 0 ؛ / * تأثير الانتقال (يظهر) * / -webkit-transiti على: كل سهولة .5 ثانية ؛ -موز-الانتقال: كل سهولة .5 ثانية ؛ -ms- الانتقال: كل سهولة .5 ثانية ؛ -o- الانتقال: كل سهولة .5 ثانية ؛ الانتقال: كل سهولة .5 ثانية ؛ ) / * تمكين النافذة من الظهور وتغميق الخلفية * /. overlay: target + .popup (أعلى: 20٪ ؛ / * موضع النافذة من أعلى الصفحة عند ظهورها * / visibility: مرئي ؛ عتامة: 1؛ / * إزالة الشفافية * /) / * تشكيل زر الإغلاق * /. #ccc ؛ -webkit-border-radius: 15px ؛ -moz-border-radius: 15px ؛ -ms-border-radius: 15px ؛ -o-border-radius: 15px ؛ نصف قطر الحدود: 15px ؛ لون الخلفية: rgba (61 ، 61 ، 61 ، 0. ثمانية)؛ -webkit-box-shadow: 0px 0px 10px # 000 ؛ -moz-box-shadow: 0px 0px 10px # 000 ؛ مربع الظل: 0px 0px 10px # 000 ؛ محاذاة النص: مركز ؛ زخرفة النص: لا شيء ؛ وزن الخط: عريض ؛ ارتفاع الخط: 20 بكسل ؛ / * تعيين القيم وتأثير الانتقال على التحويم * / -webkit-transfer: كل سهولة .8 ثوانٍ ؛ -موز-الانتقال: كل سهولة .8 ثانية ؛ -ms- الانتقال: كل سهولة .8 ثانية ؛ -o- الانتقال: كل سهولة .8 ثانية ؛ الانتقال: كل سهولة .8 ثانية ؛ ) .close: before (color: rgba (255، 255، 255، 0.9)؛ content: "X"؛ text-shadow: 0-1px rgba (0، 0، 0، 0.9)؛ font-size: 12px؛) .close: hover (لون الخلفية: rgba (252 ، 20 ، 0 ، 0.8) ؛ / * لف الزر عند التمرير * / -webkit-transform: rotate (360deg) ؛ -moz-transform: rotate (360deg) ؛ - ms -transform: rotate (360deg) ؛ -o-convert: rotate (360deg) ؛ تحويل: rotate (360deg) ؛) / * اختياري عند إضافة المرفقات * / .popup p، .popup div (margin-bottom: 10px ؛)
كما ترون ، أيها الأصدقاء الأعزاء ، كل شيء بسيط جدًا ولا يوجد فوضى غير ضرورية. إذا قمت بكل شيء بشكل صحيح ، فستحصل في ترسانتك على نافذة منبثقة رائعة يمكنك من خلالها وضع أي محتوى ، سواء كان محتوى نصيًا أو صورًا أو نماذج تسجيل مختلفة و تعليق، أو فيديو من أي مصدر خارجي. جرب المعلمات ، وقم بتعديل النافذة حسب رغبة قلبك ، وإذا أمكن ، شارك أفضل ممارساتك ، بالإضافة إلى المشكلات التي تظهر فجأة ، في التعليقات.
النماذج هي أداة شائعة الاستخدام في ترسانة مشرف الموقع. إنه مناسب تمامًا لحل عدد كبير من المهام ، مثل عرض نماذج التسجيل والوحدات الإعلانية والرسائل وما إلى ذلك.
ولكن على الرغم من المكانة المهمة في دعم المعلوماتالمشروع ، يتم عادةً تنفيذ النماذج في 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)؛ )
فئة زائفة استهدافيغير وضع العرض للعنصر ، لذلك سيتم عرض الوضع الخاص بنا عند النقر فوق الارتباط. نحن أيضا نغير قيمة الممتلكات مؤشر الأحداث.
نحدد عرض النموذج والموضع على الصفحة. حدد أيضًا التدرج اللوني للخلفية والزوايا الدائرية.
أغلق النافذة
الآن نحن بحاجة إلى تنفيذ وظيفة إغلاق النافذة. نشكل مظهر الزر:
إغلاق (الخلفية: # 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: # 00d9ff؛)
لزرنا ، قمنا بتعيين الخلفية وموضع النص. ثم نضع الزر ، ونجعله مستديرًا باستخدام خاصية التقريب للإطار ، ونشكل ظلًا دقيقًا. عندما تقوم بتمرير مؤشر الماوس فوق الزر ، سنقوم بتغيير لون الخلفية.
في كثير من الأحيان ، يمكنك العثور على نماذج على المواقع ، ويتم استخدامها جميعًا في مهام مختلفة. في الواقع ، إنها أداة قوية تسمح لك بجعل واجهة الموقع أكثر تفاعلية وسهولة في الاستخدام. على سبيل المثال ، يمكن استخدام النوافذ المشروطة لأشكال مختلفة ، مثل نموذج التفويض ونموذج الملاحظات وطلب منتج ولا تعرفه أبدًا.
في هذا المنشور ، سنلقي نظرة على مثال على كيفية إنشاء نافذة بسيطة مشروطة باستخدام باستخدام 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) .ready (function () ($ (". modal"). click (function (event) (event.preventDefault ()؛ $ ("# overlay"). fadeIn (400، // animate تظهر الغلاف 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) ؛ / / إخفاء الدرج)) ؛)) ؛)) ؛
مع الرسوم المتحركة نغير الوضع الرأسي أعلى، فضلا عن الشفافية العتامة، وبذلك نحصل على تأثير مثير للاهتمام. يتم استخدام نفس التأثير عند فتح النافذة وعند إغلاقها. الفرق هو أن ترتيب تطبيق خصائص الكتل قد تغير ، وبالتالي تصور فتح وإغلاق النافذة.