نافذة مشروط مسج مع خلفية غير واضحة. قم بإنشاء jQuery popup modal. مسج مشروط
عند الحديث عن تقنيات بناء المواقع المختلفة ، سيكون من السخف عدم الحديث عن بعض الطرق لإنشاء نوافذ مشروطة. لن نناقش الغرض من استخدام النوافذ المنبثقة وفائدتها والمشكلات الناشئة عن استخدام النوافذ المنبثقة. دعنا نحلل واحدًا فقط من أمثلة عديدة لإنشاء مثل هذه النوافذ. هناك مواقف يتعذر فيها استخدام مكونات إضافية خاصة ، على سبيل المثال ، مثل و ، لذلك يجدر بنا أن تفهم كيف يمكنك إنشاء إضافات خاصة بك.
دعونا نرى كيف نفعل ذلك:
لغة البرمجة
لنبدأ بإضافة العلامات بالسمات التالية:
href - #؟ w = 500 يشير إلى عرض النافذة
rel - سمة فريدة لكل نافذة
class = "poplight" - فئة لإظهار النافذة المنبثقة
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>راجع Window in Action - العرض = 500px
راجع Window in Action - العرض = 500px
بعد ذلك ، نحتاج إلى إنشاء ترميز مضمن للنوافذ المنبثقة. يمكنك وضعه في أي مكان على الصفحة ، على سبيل المثال ، أسفل المحتوى. لاحظ أن المعرف المنبثق يطابق السمة relبطاقة شعار سيؤدي هذا إلى ربط الرابط والنوافذ المنبثقة معًا.
عنوان
أي نص يشتهيه قلبك
وهكذا ، اكتشفنا موضع نافذتنا على الصفحة ، والآن دعونا نصممها باستخدام الأنماط ، ونمنحها ، إذا جاز التعبير ، مظهرًا لائقًا.
تخطيط CSS
من أجل الوضوح ، قمت بكتابة بعض التفسيرات لمعايير نمط نافذتنا. نظرًا لأن النوافذ المنبثقة يمكن أن تكون ذات أحجام مختلفة ، فإننا لا نحددها في CSS popup_blockحواف النافذة ، لحساب الحجم المطلوب ، هذه مجرد مهمة.
# تتلاشى (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * /الخلفية: rgba (7 ، 87 ، 207 ، 0.8) ؛ الموقف: ثابت ؛ اليسار: 0؛ أعلى: 0؛ العرض: 100٪؛ الارتفاع: 100٪؛ العتامة: .80 ؛ مؤشر z: 9999 ؛ ) .popup_block (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * /الخلفية: #fff ؛ الحشو: 20 بكسل ؛ الحدود: 8 بكسل rgb صلبة (134 ، 134 ، 134) ؛ تعويم: اليسار؛ حجم الخط: 85٪؛ الموقف: ثابت ؛ أعلى: 50٪؛ اليسار: 50٪؛ اللون: # 000 ؛ أقصى عرض: 750 بكسل ؛ العرض الأدنى: 320 بكسل ؛ الارتفاع: تلقائي ؛ مؤشر z: 99999 ؛ / * - مربع الظل CSS3 - * /-webkit-box-shadow: 0px 0px 20px # 000 ؛ -moz-box-shadow: 0px 0px 20px # 000 ؛ ظل الصندوق: 0px 0px 20px # 000 ؛ / * - تقريب زاوية CSS3 - * /-webkit-border-radius: 12px؛ - دائرة نصف قطرها: 12 بكسل ؛ نصف قطر الحدود: 12 بكسل ؛ ) .popup_block p (font-weight: 400؛ padding: 0؛ margin: 0؛ color: # 000؛ line-height: 1.6؛) .popup_block h2 (margin: 0px 0 10px؛ color: rgb (43، 43، 43 ) ؛ وزن الخط: 400 ؛ محاذاة النص: المركز ؛ ظل النص: 1 بكسل 1 بكسل 2 بكسل # 0D0C0C ؛) / * تشكيل زر اغلاق * /.close (لون الخلفية: rgba (61، 61، 61، 0.8)؛ border: 2px Solid #ccc؛ height: 25px؛ line-height: 20px؛ position: مطلق؛ right: -17px؛ font-weight: bold؛ محاذاة النص: المركز ؛ زخرفة النص: لا شيء ؛ الحشو: 0 ؛ أعلى: -17 بكسل ؛ العرض: 25 بكسل ؛ -مجموعة الويب-الحد-نصف قطر: 50٪ ؛ -موز-الحدود-نصف قطر: 50٪ ؛ -ms-border- نصف القطر: 50٪ ؛ -o-border-radius: 50٪؛ border-radius: 50٪؛ -moz-box-shadow: 1px 1px 3px # 000؛ -webkit-box-shadow: 1px 1px 3px # 000؛ box- shadow: 1px 1px 3px # 000 ؛) .close: before (color: rgba (255، 255، 255، 0.9)؛ content: "X"؛ font-size: 12px؛ text-shadow: 0-1px rgba (0، 0 ، 0 ، 0.9) ؛). 4px 10px # 857373؛ -moz-box-shadow: 4px 4px 10px # 857373؛ padding: 0؛) / * - تحديد المواقع الثابتة لـ IE6 - * /* html #fade (الموقف: مطلق ؛) * html .popup_block (الموضع: مطلق ؛)
# تتلاشى (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * / الخلفية: rgba (7 ، 87 ، 207 ، 0.8) ؛ الموضع: ثابت ؛ يسار: 0 ؛ أعلى: 0 ؛ عرض: 100٪ ؛ ارتفاع: 100٪ ؛ العتامة: .80 ؛ z-index: 9999 ؛) .popup_block (عرض: لا شيء ؛ / * - مخفي افتراضيًا - * / الخلفية: #fff ؛ الحشو: 20 بكسل ؛ الحد: 8 بكسل الصلبة rgb (134 ، 134 ، 134) ؛ عائم: يسار ؛ حجم الخط: 85٪ ؛ الموضع: ثابت ؛ أعلى: 50٪ ؛ يسار: 50٪ ؛ اللون: # 000 ؛ الحد الأقصى للعرض: 750 بكسل ؛ الحد الأدنى للعرض: 320 بكسل ؛ الارتفاع: تلقائي ؛ مؤشر z : 99999؛ / * - CSS3 box shadow - * / -webkit-box-shadow: 0px 0px 20px # 000؛ -moz-box-shadow: 0px 0px 20px # 000؛ box-shadow: 0px 0px 20px # 000؛ / * - تقريب الزوايا CSS3 - * / -webkit-border-radius: 12px ؛ -moz-border-radius: 12px ؛ نصف قطر الحدود: 12px ؛) .popup_block p (وزن الخط: 400 ؛ الحشو: 0 ؛ الهامش: 0 ؛ اللون: # 000 ؛ ارتفاع السطر: 1.6 ؛) .popup_block h2 (الهامش: 0px 0 10px ؛ اللون: rgb (43 ، 43 ، 43) ؛ وزن الخط: 400 ؛ محاذاة النص: المركز ؛ ظل النص: 1px 1px 2px # 0D0C0C؛) / * شكل زر الإغلاق * / .close (backgro und-color: rgba (61 ، 61 ، 61 ، 0.8) ؛ الحدود: 2px صلب #ccc ؛ الارتفاع: 25 بكسل ؛ ارتفاع الخط: 20 بكسل ؛ الموقف: مطلق. اليمين: -17 بكسل ؛ وزن الخط: عريض ؛ محاذاة النص: مركز ؛ زخرفة النص: لا شيء ؛ الحشو: 0 ؛ أعلى: -17 بكسل ؛ العرض: 25 بكسل ؛ نصف قطر مجموعة الويب الحدودية: 50٪ ؛ -موز حدود نصف قطرها: 50٪ ؛ نصف قطر حدود ms: 50٪ ؛ نصف قطر o: 50٪ ؛ نصف قطر الحدود: 50٪ ؛ -moz-box-shadow: 1px 1px 3px # 000 ؛ -webkit-box-shadow: 1px 1px 3px # 000 ؛ مربع الظل: 1px 1px 3px # 000 ؛ ) .close: before (color: rgba (255، 255، 255، 0.9)؛ content: "X"؛ font-size: 12px؛ text-shadow: 0-1px rgba (0، 0، 0، 0.9)؛) .close: hover (background-color: rgba (252، 20، 0، 0.8)؛). الظل (box-shadow: 4px 4px 10px # 857373؛ -webkit-box-shadow: 4px 4px 10px # 857373؛ -moz- box-shadow: 4px 4px 10px # 857373؛ padding: 0؛) / * - تحديد الموضع الثابت لـ IE6 - * / * html #fade (position: Absolute؛) * html .popup_block (موضع: مطلق ؛)
مع تشكيل النافذة وظهورها باستخدام css ، أعتقد أنه لن تكون هناك صعوبات معينة. يمكن كتابة الأنماط مباشرة على صفحة HTML ، بين العلامات
و، أو يمكنك وضع الأنماط الخاصة بك في ملف منفصل ، وعادة ما يكون هذا ملفًا style.css، أو شيء من هذا القبيل.
إعداد JQuery
من أجل العمل الكامل للنافذة المشروطة ، تحتاج إلى توصيل jQuery ، ويمكن لمن ليسوا على دراية بعمل هذه المكتبة القراءة.
حسنًا ، سنمضي قدمًا. يمكنك استخدام أحدث إصدار من jQuery من موقع المكتبة على الويب ، أو استخدام ملف منفصل مستضاف في Google عن طريق ربطه بالمستند الموجود في القسم قبل علامة الإغلاق
بوضع خط مثل هذا:
في الخطوة التالية ، سننظر في حشو ووظائف المكون الإضافي jquery ، لتنشيط النافذة المنبثقة ، يحتوي الكود على بعض التفسيرات لفهم أفضل لما نقوم به.
JQuery البرنامج المساعد
$ (وثيقة). جاهز (وظيفة () ( // عند النقر على الرابط الذي يحتوي على فئة poplight و href الخاص بسمة العلامة مع #$ ("a.poplight"). click (function () (var popID = $ (this). attr ("rel") ؛ // احصل على اسم النافذة ، من المهم ألا تنسى تغيير الاسم في السمة rel للرابط عند إضافة أخرى جديدة var popURL = $ (هذا). attr ("href") ؛ // احصل على الحجم من سمة href للارتباط// طلب والمتغيرات من عنوان url hrefاستعلام var = popURL. الانقسام ("؟")؛ var dim = استعلام [1]. الانقسام ("&")؛ var popWidth = dim [0]. انقسام ("=") [1] ؛ // القيمة الأولى لسلسلة الاستعلام// أضف زر إغلاق إلى النافذة$ ("#" + popID). اختفي (). css (("العرض": الرقم (عرض النقطة المنبثقة))). قبل ( ""
)
;
// تحديد الهامش (الهامش) للمحاذاة المركزية (عموديًا وأفقيًا) - نضيف 80 إلى الارتفاع / العرض ، مع مراعاة الحشو + عرض الحد المحدد في css var popMargTop = ($ ("#" + popID). height () + 80) / 2 ؛ var popMargLeft = ($ ("#" + popID). width () + 80) / 2؛ // تعيين مقدار المساحة المتروكة$ ("#" + popID). css (("margin-top": - popMargTop، "margin-left": - popMargLeft)) ؛ // أضف خلفية تظليل شبه شفافة$ ("الجسم"). ألحق (" "
)
;
// ستتم كتابة حاوية div قبل الوسم.
$ ("# fade"). css (("filter": "alpha (opacity = 80)")). اختفي ()؛ // طبقة شفافة ، مرشح لـ IE الباهتعودة كاذبة؛ )) ؛ // أغلق النافذة وتظليل الخلفية$ (وثيقة). on ("click"، "a.close، #fade"، function () ( // أغلق عند النقر خارج النافذة ، أي في الخلفية ...$ ("# fade، .popup_block"). fadeOut (function () ($ ("# fade، a.close"). remove ()؛ // تتآكل)) ؛ عودة كاذبة؛ )) ؛ )) ؛
بشكل عام ، إذا لم تذهب إلى الغابة ولم تقم بتحميل نفسك برطانة غير ضرورية ، فإن نافذة النموذج الرائعة لدينا جاهزة للعمل ، وتنتظر ترجمة أفكارك إلى نص ، أو أي معلومات أخرى مفيدة. بالنسبة لأولئك الذين يرغبون في استخدام نافذة مشروطة لوضع مقاطع فيديو أو صور كبيرة الحجم فيها ، فقد أوصيت مع ذلك باستخدام مكونات إضافية خاصة ، نظرًا لأن المثال أعلاه للنافذة النموذجية مخصص أكثر للحصول على معلومات خفيفة وليست ثقيلة جدًا ، على الرغم من أنه إذا رغبت في ذلك ، فهذه ليست مشكلة ...
في المرة القادمة سأخبرك بالتأكيد وأعرض لك مثالًا ، وبالتأكيد ، سيهتم الكثيرون بالتعرف على كائنات الطرف الثالث الأخرى في النافذة المنبثقة. لذلك لا تضيع على الويب ولا تنزعج!
تحديث: الإصدار dm-modal.js v1.3 (15.01.2017) مثبت: تم استبدال وظيفة .live () المهملة باستخدام href * = \\ # بناء الجملة. يعمل المكون الإضافي الآن مع الإصدارات الحديثة من مكتبة jQuery
هذا كل شئ! آمل أن تكون قد حصلت على برنامج تعليمي آخر مفيد.
مع كل الاحترام ، أندرو
1. نافذة مشروطة في jQuery "Simple Modal Box"
2. jQuery plugin "LeanModal"
عرض المحتوى في أشكال. لمشاهدة عمل المكون الإضافي في صفحة العرض التوضيحي ، انقر فوق الارتباط: نموذج التسجيل أو المحتوى الأساسي.
3. jQuery plugin "ToastMessage"
الرسائل المنبثقة. يأتي البرنامج المساعد بنكهتين. في حالة واحدة ، تختفي الرسائل من تلقاء نفسها ، بعد فترة معينة ، في التنفيذ الثاني ، لإغلاق الرسالة ، يجب النقر فوق الزر.
4. المحتوى الذي ينبثق في نافذة مشروطة
البرنامج المساعد "كشف". لمشاهدة البرنامج المساعد قيد التنفيذ ، انقر فوق الزر "Fire A Reveal Modal" في صفحة العرض التوضيحي.
5. مربعات حوار لطيف
انقر فوق التقاطع في صفحة العرض التوضيحي لرؤية المكون الإضافي قيد التشغيل.
مربعات حوار على غرار Facebook. بالإضافة إلى المعلومات الثابتة ، الصور ، الإطارات ، يمكن وضع طلبات Ajax في النوافذ. الكثير من إعدادات البرنامج المساعد ، أداة قوية للغاية. تبدو أنيقة وعملية للغاية. اتبع الروابط الموجودة على الصفحة التجريبية لمشاهدة أمثلة ذات محتوى مختلف.
11.jQuery مشروط
مربع حوار أنيق منبثق لـ jQuery.
12. وسائط jQuery
نوافذ مشروطة منبثقة لطيفة. ثلاثة أنماط. توفر صفحة العرض 3 روابط للاتصال بنوافذ.
13. نماذج jQuery
نوافذ مشروطة منبثقة من عدة أنواع. لمشاهدة البرنامج المساعد قيد التشغيل ، انقر فوق الارتباط الموجود في صفحة العرض التوضيحي.
15. رسالة منبثقة فوق الصفحة
يتم عرض الرسالة فوق الصفحة ، والتي بدورها تكون باهتة. انقر فوق "انقر فوقي" في صفحة العرض لرؤية الرسالة المنبثقة. النقر على الصليب سيغلقه. تم التنفيذ مع jQuery.
16. نافذة مشروطة "ModalBox" في جافا سكريبت
تنفيذ مربعات حوار نمطية حديثة دون استخدام النوافذ المنبثقة وإعادة تحميل الصفحة. في صفحة العرض التوضيحي ، انقر فوق الزر "بدء العرض التوضيحي" لترى كيف يعمل البرنامج النصي.
17. البرنامج المساعد "Leightbox" باستخدام مكتبة النموذج الأولي
البرنامج المساعد لعرض المحتوى في النوافذ المشروطة.
في كثير من الأحيان ، يمكنك العثور على نماذج على المواقع ، ويتم استخدامها جميعًا في مهام مختلفة. في الواقع ، إنها أداة قوية تسمح لك بجعل واجهة الموقع أكثر تفاعلية وسهولة في الاستخدام. على سبيل المثال ، يمكن استخدام النوافذ المشروطة لأشكال مختلفة ، مثل نموذج التفويض ونموذج الملاحظات وطلب منتج ولا تعرفه أبدًا.
في هذا المنشور ، سنلقي نظرة على مثال على كيفية إنشاء نافذة بسيطة مشروطة باستخدام jQuery و CSS. خصوصية هذا المثال هو أنه غير مطلوب هنا ، حسنًا ، باستثناء مكتبة jQuery نفسها.
ضع الكود الشرطي على الصفحة:
أغلق
فتح نافذة مشروطة
كما ترى من خلال الترميز ، فإن كتلة النافذة المشروطة نفسها عبارة عن div مع id = سمة شكليالذي يحتوي على عنصر امتداد بالمعرف = مشروط... سيكون هذا العنصر بمثابة زر لإغلاق النافذة المشروطة ، بالإضافة إلى ذلك ، يوجد أسفل الكتلة div مع id = سمة تراكب، والذي يعمل في نفس الوقت على تعتيم الخلفية. سيتم فتح النافذة المشروطة بالرجوع إلى الفصل مشروط.
ل شكليقمنا بتعيين عرض وارتفاع ثابتين ثم قمنا بتوسيط الموضع على منتصف الشاشة. للحصول على أساس مشروط ( تراكب) نقوم بتعيين الحجم على عرض الشاشة ، ونملأه بالشفافية ، ونخفيه أيضًا بشكل افتراضي. لحظة خاصة مع الفهرس z، يجب أن يحتوي النموذج على أكبر عدد من جميع العناصر الموجودة على الصفحة ، ويجب أن يحتوي الغلاف على أكبر العناصر على الإطلاق باستثناء النموذج نفسه.
الآن إلى أبسط ، هذا هو كود جافا سكريبت. بالنسبة للنافذة المشروطة ، سيتم استخدام حدثين رئيسيين ، وهذا هو فتحها - النقر فوق عنصر مع الفصل مشروط، في حالتنا هذا رابط ، وإغلاق النافذة المشروطة هو نقرة على الغلاف ( تراكب) ، أو انقر فوق زر الإغلاق ، في حالتنا هو عنصر امتداد بمعرف = مشروط.
مع الرسوم المتحركة نغير الوضع الرأسي أعلى، فضلا عن الشفافية العتامة، وبذلك نحصل على تأثير مثير للاهتمام. يتم استخدام نفس التأثير عند فتح النافذة وعند إغلاقها. الفرق هو أن ترتيب تطبيق خصائص الكتل قد تغير ، وبالتالي تصور فتح وإغلاق النافذة.
3. مثال على نافذة مشروطة jQuery يتم استدعاؤها من خلال المرجع (مع عرض توضيحي)
على الأرجح ، لقد رأيت بالفعل نافذة نموذجية منبثقة على الإنترنت أكثر من مرة - تأكيد التسجيل والتحذير ومعلومات المساعدة وتنزيل الملف وغير ذلك الكثير. في هذا البرنامج التعليمي ، سأقدم بعض الأمثلة عن كيفية إنشاء أبسط النوافذ المشروطة.
كيفية إنشاء نموذج بسيط منبثقة
لنبدأ في فحص رمز أبسط نافذة مشروطة ستظهر على الفور كود jQuery
الصق الكود في أي مكان في هيئةصفحتك. بعد تحميل الصفحة مباشرة ، بدون أي أوامر ، سترى نافذة تبدو كالتالي:
ولكن سيتم تنفيذ الكود التالي بعد تحميل الصفحة بأكملها في المتصفح. في مثالنا ، بعد تحميل الصفحة بالصور ، ستظهر نافذة منبثقة بسيطة:
قم باستدعاء نافذة jQuery modal بالرجوع إلى CSS
الخطوة التالية هي الإنشاء نافذة مشروطةعند النقر على الرابط. ستغمق الخلفية ببطء.
غالبًا ما ترى أن استمارات تسجيل الدخول والتسجيل موجودة في هذه النوافذ. دعونا ننكب على العمل
أولا ، دعنا نكتب جزء أتش تي أم أل... نضع هذا الرمز في نص المستند الخاص بك.
استدعاء نافذة مشروطة
نص مشروط
قريب
النص في النافذة المشروطة.
كود CSS... إما في ملف css منفصل أو بتنسيق
في كود jQuery ، سنركز على موضع الشرط والقناع ، وفي هذه الحالة نغمق الخلفية تدريجيًا.
انتباه! لا تنس تضمين المكتبة في رأس المستند!
ربط المكتبة من موقع جوجل. حسنًا ، كود jQuery نفسه.
كود JQuery
تعد الوسائط جزءًا لا يتجزأ من تصميم الويب الحديث ، وبمساعدتها يمكن للمطور اللجوء إلى طريقة التكرار في صفحة واحدة وعدم إلقاء الزائر على صفحات ثانوية. في هذا البرنامج التعليمي ، سنلقي نظرة على كيفية إنشاء نماذج خلفية ضبابية رائعة لموقع الويب الخاص بك باستخدام jQuery و CSS3. بفضل هذه القواعد ، سننشئ خلفية ضبابية عند ظهور نافذة ، والتي ستربط نظر الزائر فقط بالمعلومات الضرورية على الموقع.
أنماط الخلفية غير الواضحة CSS3
أفضل الأخبار الاقتصادية هنا فقط: دروباخا
سيتم تعيين الرسوم المتحركة للنافذة بطريقة أنه عند النقر فوق زر المظهر ، سيتم تحريك النافذة من أعلى إلى أسفل ، بينما يتم تحسين ضبابية الخلفية تلقائيًا.
الخطوة 1. HTML
سيكون لدينا حاوية تحتوي على: العنوان والوصف ، ثم نضيف فئة لزر به فئة toggleModalلفتح نافذة مشروطة:
عنوان
وصف
عنوان النافذة
تعد علامات التبويب أمرًا ممتعًا ومفيدًا للغاية عند إنشاء موقع ويب ، فهي تتيح لك تنظيم المعلومات بشكل صحيح ، مع توفير مساحة صغيرة على الموقع.
ثم نحتاج إلى إضافة فصل دراسي مشروط نشط، ستكون هذه الفئة مسؤولة عن استدعاء النافذة المشروطة ، مشروطمسؤول عن العنوان وتصميمه للنافذة.
الخطوة 2. CSS
الآن دعنا ننتقل إلى التصميم ، ستكون الخطوة الأولى هي الفصل زر،التي ستكون مسؤولة ، كما خمنت ، عن الأزرار الموجودة على الموقع ، قمنا بتعيين معلمات العرض الصحيحة لها:
زر (الخلفية: لا شيء ؛ مشبك الخلفية: مربع الحشو ؛ العرض: كتلة مضمنة ؛ الحد: 0 ؛ تحديد المستخدم: لا شيء ؛ -webkit-touch-callout: لا شيء ؛ -webkit-المظهر: زر ؛ -webkit-user -select: لا شيء ؛ -moz-user-select: none ؛ -ms-user-select: none ؛)
الحاوية (الموضع: نسبي ؛ الهامش: 0 تلقائي ؛ أقصى عرض: 960 بكسل ؛ حجم الصندوق: مربع الحدود ؛ أعلى الحشو: 40 بكسل ؛)
الأنماط بسيطة للغاية ، يتم تخزينها في ملف منفصل ولا ينبغي أن تسبب صعوبات عند تحريرها لمطور واجه CSS من قبل.
الخطوة 3. شبيبة
سيكون الإعداد الأخير ، ولكن ليس أقل أهمية ، هو إعداد التعتيم التلقائي للخلفية عند ظهور القائمة ، بالإضافة إلى إمكانية النقر على الروابط ، مع هذه القواعد الصغيرة ستساعدنا شبيبة:
برنامج قابل للتخصيص
سيعيد Windows 8 زر البدء
تثبيت Skype على جهاز كمبيوتر (إرشادات خطوة بخطوة)