دليل إرشادي لمربعات الوسائط باستخدام Javascript و HTML و CSS

لقد قفزت مؤخرًا من إنشاء تطبيقات روبي fullstack إلى العمل مع Javascript. كما تعلمون بالفعل ، يتيح Javascript للمستخدمين ، أو العملاء ، التفاعل مع صفحة ويب وتقديم محتوى جديد ديناميكيًا إلى DOM بناءً على تفاعل المستخدم. مقارنةً بالترميز في Ruby on Rails (والذي يتطلب فيه كل rerender تحديث الصفحة بالكامل) ، فإن القدرة على إعادة تقديم عناصر الصفحة المختلفة بناءً على تفاعلات المستخدم مع Javascript جلبت مهارات تطوير الواجهة الأمامية الخاصة بي من عام 1994 وحتى الوقت الحاضر. من خلال فهمي البدائي لجافا سكريبت ، يمكنني الآن إنشاء عنصر ويب تفاعلي كنت أتطلع إلى تنفيذه في مشاريعي: صناديق الرسائل - أو النوافذ المنبثقة.

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

أنواع صناديق الرسائل

التنبيهات

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

تنبيه صندوق الرسائل

يظهر فجأة

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

صندوق الرسائل المنبثقة

الهدير الإخطار / فلاش لاحظ

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

الهدير الإخطار

صندوق / مسرح

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

صندوق / مسرح

بوبوفير / مشتملة

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

بوبوفير / مشتملة

مربع حوار / مشروط

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

مربع حوار / مشروط

تنفيذ مشروط

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

  1. HTML: العلامات لإنشاء عنصر مشروط
  2. CSS: تصميم لتحديد كيفية ظهور الوسائط الخاصة بك وظهورها على الصفحة
  3. Javascript: وضع مستمعي الأحداث بحيث يظهر / يختفي الوسائط بناءً على تفاعل المستخدم

HTML

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

في ما سبق ، يمكنك أن ترى أن لدينا زرًا سيظهر في HTML الخاص بنا ، بالإضافة إلى مشروط ، مع ثلاث فئات من CSS: modal ، modal-btn ، و close-btn. سيتم تضمين كل منها في CSS أدناه. div الأولى هي الحاوية الأصل التي تحتوي على المشروط بأكمله مع فئة من الوسائط. داخليًا ، لدينا div تحتوي على محتوى الوسائط نفسها: الزر لإغلاق المشروط في النطاق والنص داخل ptag.

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

CSS

لتصميم كل عنصر من العناصر في HTML الخاص بالمشروعات البسيطة ، نحتاج إلى إنشاء فئات CSS المرتبطة: .modal و .modal-content و .close-btn. علاوة على ذلك ، يمكنك أن ترى أدناه أن هناك أيضًا CSS مضمن لإنشاء رسوم متحركة للمودم.

.modal {
  عرض لا شيء؛
  الموقف: ثابت.
  الحشو أعلى: 50px.
  اليسار: 0 ؛
  أعلى: 0 ؛
  العرض: 100 ٪ ؛
  الارتفاع: 100 ٪ ؛
  لون الخلفية: rgb (0 ، 0 ، 0) ؛
  لون الخلفية: rgba (0 ، 0 ، 0 ، 0.5) ؛
}
.modal-content {
  الموقف: نسبي
  لون الخلفية: أبيض.
  الحشو: 20px.
  الهامش: السيارات ؛
  العرض: 75 ٪ ؛
  -webkit-animation-name: animatetop؛
  -Webkit-animation-المدة: 0.4s ؛
  اسم الرسوم المتحركة: animatetop؛
  مدة الرسوم المتحركة: 0.4s
}
.close-btn {
  تطفو: صحيح ؛
  اللون: lightgray.
  حجم الخط: 24 بكسل ؛
  وزن الخط: غامق ؛
}
.close-btn: hover {
  اللون: الظلام
}
@ -webkit-keyframes animatetop {
  من {top: -300px؛ التعتيم: 0}
  إلى {top: 0؛ التعتيم: 1}
}
تضمين التغريدة
  من {top: -300px؛ التعتيم: 0}
  إلى {top: 0؛ التعتيم: 1}
}

في الفئات المذكورة أعلاه ، لدينا تصميم لكل عنصر من العناصر التي أنشأناها في HTML لدينا.

تحتوي فئة .modal نفسها على سمات تحدد كيفية تعاملها مع الصفحة الموجودة خلف المشروط نفسها: عرض وارتفاع مقارنةً بالصفحة الموجودة خلف مربع الحوار ولون (يستخدم هذا المثال رمادي شبه شفاف) وإعداد رؤية لذلك يمكننا تبديلها في Javascript لدينا عندما ينقر المستخدم على الزر.

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

علاوة على ذلك ، قمنا بتصميم فئة .close-btn تطفو على "x" إلى اليمين ، ومع .close-btn: hover ، عندما يحوم المستخدم فوق زر الإغلاق ، سيتغير اللون. من أجل الوضوح ، يمكن للمستخدم النقر خارج الوسائط لإغلاق مربع الحوار مثل النقر فوق الزر "إغلاق". سننشئ مستمع أحداث لكلا الخيارين في Javascript لدينا.

هذا بالكاد يخدش سطح CSS الذي يمكنك تنفيذه بمفردك. لا تتردد في ضبط الكود أعلاه لتناسب احتياجاتك الخاصة.

جافا سكريبت

أخيرًا ، نحتاج إلى كتابة بعض Javascript من أجل إنشاء وظائف الوسائط.

دع modalBtn = document.getElementById ("modal-btn")
دع مشروط = document.querySelector (". مشروط")
دع closeBtn = document.querySelector (". close-btn")
modalBtn.onclick = function () {
  modal.style.display = "block"
}
closeBtn.onclick = function () {
  modal.style.display = "none"
}
window.onclick = function (e) {
  if (e.target == مشروط) {
    modal.style.display = "none"
  }
}

لقد اخترنا العديد من الكائنات من HTML لدينا وقمنا بتخصيصها للمتغيرات: مشروط btn ، مشروط نفسه ، قريب من btn. بعد ذلك ، قمنا بإنشاء مستمعين للفعاليات لأحداث onclick. عندما ينقر المستخدم على modal-btn ، يتم تعيين نمط العرض على "block" ، ولكن عندما يقوموا بالنقر فوق close btn أو النافذة خارج مشروط (ممثلة في التصميم لدينا باعتباره الرمادي شبه كامد) ، يتم ضبط نمط العرض بعد ذلك على "بلا" ، وهذا يخفي الوسيلة بفعالية حتى ينقروا على الوسائط مرة أخرى.

مشروط مطبوعة على الشاشة

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

حظا سعيدا هناك ، والترميز سعيدة!

مصادر

تبادل المكدس: الوسائط ، النوافذ المنبثقة ، البوبوفيرس ، و Lightboxes

w3schools: كيفية - CSS / JS مشروط

Sabe: كيفية إنشاء مربع منبثق مشروط مع CSS وجافا سكريبت