نافذة منبثقة بسيطة CSS. كيفية عمل نافذة مشروطة في CSS. البرنامج المساعد مسج "ToastMessage"

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

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

انقر هنا! X طلب مكالمة

أعتقد أن كل شيء واضح مع الكود. لدينا Wrapper.wrapper، حيث يوجد محتوى موقعنا. يوجد زر لاستدعاء نافذة مشروطة باستخدام نافذة المعرف، والنافذة نفسها باستخدام نافذة المعرف modal_window وطبقة التراكب myoverlay. الآن دعونا نكتب أنماط CSS.

الغلاف (العرض: 100%؛ الهامش: تلقائي؛ العرض: تلقائي؛/*نفس 100%*/ الحد الأقصى للعرض: 960 بكسل;/*الحد الأقصى لعرض الغلاف*/ الحدود: 1 بكسل صلب #000; لون الخلفية: # F5F9FB; ) .button( /*-------*/ ) #modal_window ( العرض: 34%;/*للاستجابة*/ الارتفاع: 300 بكسل; نصف قطر الحدود: 10 بكسل; الحد: 3 بكسل #fff صلب; الخلفية : # e0e0e0؛ الهامش العلوي: -30%؛ الهامش الأيسر: 33%؛ العرض: لا شيء؛ العتامة: 0؛ / * الشفافية الكاملة للرسوم المتحركة * / مؤشر z: 5000؛ / * يجب أن تكون النافذة هي الطبقة العليا * / الحشو -أعلى: 20 بكسل؛ محاذاة النص: المركز؛ الموضع: نسبي؛ ) #modal_window #window_إغلاق (العرض: 21 بكسل؛ الارتفاع: 21 بكسل؛ الموضع: مطلق؛ الأعلى: 10 بكسل؛ اليمين: 10 بكسل؛ المؤشر: المؤشر؛ العرض: كتلة؛ ) #myoverlay ( z-index: 3000; /*فوق كل الطبقات ولكن أسفل النافذة*/ الموضع: ثابت; /*لتداخل الموقع*/ لون الخلفية: #000; العتامة: 0.5; العرض: 100%; الارتفاع: 100%؛ /*ملء الشاشة*/ الأعلى: 0؛ اليسار: 0؛ المؤشر: المؤشر؛ العرض: لا شيء؛ )

دعونا نصف كود CSS. لقد قمنا بتعيين block.wrapper ليكون قابلاً للتكيف، فهو يتغير اعتمادًا على حجم الشاشة ولكن ليس أكثر من 960 بكسل. لن أعرض رمز الزر. لقد قمنا بتعيين عرض نافذة #modal_window كنسبة مئوية، وسيعتمد العرض على عرض ملف .wrapper. لتوسيط النافذة، اضبط الهامش على 33%. يتم حسابها على أنها 50%-17%، حيث 17% هي نصف عرض النافذة. نقوم بإخفاء النافذة مع عرض الخصائص: لا شيء والتعتيم: 0. باستخدام الكود #window_ Close و #myoverlay، أعتقد أن كل شيء واضح. دعونا الآن نكتب كود jquery. سنفترض أن jqery متصل بالفعل.

$(document).ready(function() ( $("#gowindow").click(function())(// انقر على الزر $("#myoverlay").fadeIn(400, // إظهار طبقة التراكب وظيفة () ( $("#modal_window") .css("display"، "block") //جعل النافذة مرئية.animate((التعتيم: 1، الأعلى: "50%")، 200)؛ // زيادة الشفافية، النافذة تتحرك بشكل سلس للخارج )); )); /* إزالة النافذة */ $("#window_ Close, #myoverlay").click(function())( // انقر على الطبقة المتداخلة أو ضع علامة متقاطعة $ ("#modal_window") .animate((التعتيم: 0، الأعلى: "45%"), 200، // الشفافية قيد التشغيل، وترتفع النافذة إلى الأعلى function())( $(this).css("display", "none"); //جعل النافذة غير مرئية $("# myoverlay").fadeOut(400); //إزالة الطبقة المتداخلة )); )); ));

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

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

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

مكون إضافي بسيط للغاية وخفيف الوزن لـ jQuery يمكنك من خلاله تنفيذ عرض النوافذ المشروطة على موقع الويب الخاص بك بسرعة وسهولة مع أي معلومات، سواء كانت نصًا بسيطًا أو صورًا أو أشكالًا مختلفة أو فيديو مضمنًا.
يتم تشكيل المظهر باستخدام CSS، ويتم تعيين حجم النافذة مباشرة في الرابط، في السمة href="#?w=500"، حيث يشير #?w=500 إلى عرض النافذة المطلوب. لكن بعد دراسة تفاصيل الدرس سيصبح كل شيء واضحًا للغاية. لكي يعمل هذا الحل، يلزم وجود مكتبة jQuery متصلة بالموقع.

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

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

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

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

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

فرصة ممتازة للمستخدمين لإرسال رسائل من أي صفحة أو منشور موقع فردي (مدونة) هي نموذج اتصال مشروط منفصل. قم بإرفاق معالج PHP بالنموذج بشكل صحيح، وضعه في نص الصفحة التي تحتاجها، وهذا كل شيء، كل ما عليك فعله هو التحقق من صندوق البريد الخاص بك بشكل دوري. تعمل هذه الطريقة بشكل صحيح في جميع المتصفحات الحديثة: Chrome، Firefox، Opera، Safari، وكذلك في Internet Explorer، بدءًا من الإصدار 9. تم تجهيز النموذج نفسه بوظيفة نافذة مشروطة باستخدام سحر CSS3.

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

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

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

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

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

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

الخطوةالاولى. كود جافا سكريبت.

لبدء تشغيل نافذة مشروطة، تحتاج إلى تمرير القيمة إلى الوظيفة window.onload. حيث سنمرر عنصرين معرفين " أ" و " ب".

// تمرير العناصر حسب المعرف "a" و"b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); )

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

// إظهار نافذة الوظيفة "showA" function showA() ( // ضبط الشفافية وحظر العرض // للعنصر "b" b.style.filter = "alpha(opacity=80)"; b.style. العتامة = 0.8؛ b .style.display = "block"؛ // اضبط الحجب والحشوة العلوية على 200 بكسل // للعنصر "a" a.style.display = "block"؛ a.style.top = "200px "؛)

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

// اتصل بالوظيفة "hideA"، والتي ستخفي // نافذة العنصرين "a" و"b" الدالةإخفاء A() ( b.style.display = "none"; a.style.display = "none"; )

الرمز الكامل.

// تمرير العناصر حسب المعرف "a" و"b" window.onload = function() ( a = document.getElementById("a"); b = document.getElementById("b"); ) // إظهار نافذة الوظيفة وظيفة "showA" showA() ( // ضبط الشفافية وحظر عرض // العنصر "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style. Display = "block"; // اضبط الحظر والهامش العلوي على 200 بكسل // للعنصر "a" a.style.display = "block"; a.style.top = "200px"; ) // اتصل بـ " وظيفة إخفاء "أ"، والتي ستخفي // نافذة للعنصرين "أ" و"ب" وظيفة إخفاء A() ( b.style.display = "none"; a.style.display = "none"; )

الخطوة الثانية. كود HTML.

يفتح

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

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

يغلق

نقوم بتسجيل المعرف " ب"، والتي سوف تخفي النافذة.

الرمز الكامل.

فتح إغلاق

الخطوة الثالثة. كود CSS.

الأنماط المطلوبة CSS، والتي بدونها لن تعمل النافذة المشروطة بشكل صحيح، أو بالأحرى لن تعمل أو تعرض المعلومات بشكل صحيح على الإطلاق.

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

#b ( الموضع: ثابت؛ أعلى: 0؛ يسار: 0؛ يمين: 0؛ أسفل: 0؛ العرض: لا شيء؛ الخلفية: رمادي؛ فهرس z: 1؛ ) #a ( الحدود: 1 بكسل أسود خالص؛ الموضع: ثابت ؛ الخلفية: #eff7ff؛ فهرس z:3؛ العرض: لا شيء؛ ) #windows ( الحشو: 5 بكسل؛ العرض: 500 بكسل؛ الارتفاع: 300 بكسل؛ الحدود: 2 بكسل أزرق خالص؛ ) أ. الصفحات ( الخلفية: #97cdff؛ اللون: أبيض؛ الحشو: 4 بكسل؛ زخرفة النص: لا شيء؛ ) أ: hover.pages ( الخلفية: أحمر؛ اللون: أبيض؛ الحشو: 4 بكسل؛ زخرفة النص: لا شيء؛ )

شكرا جزيلا لكم جميعا على اهتمامكم!

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

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

يمكنك استخدام نافذة مشروطة عندما تحتاج إلى:

يُستخدم عندما تريد مقاطعة المهمة الحالية للمستخدم لجذب انتباهه إلى شيء أكثر أهمية.

استخدمه عندما تريد الحصول على معلومات من المستخدم. على سبيل المثال، نموذج التسجيل والترخيص.

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

استخدمه عندما تريد إظهار معلومات لا تتعلق مباشرة بالصفحة الرئيسية أو بمعلمات أخرى "مستقلة" عن الصفحات الأخرى. على سبيل المثال، الإخطارات.

ملاحظة: لا تستخدم الوسائط لعرض رسائل الخطأ أو رسائل نجاح المهمة أو رسائل التحذير. اتركهم على الصفحة.

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

امنح المستخدمين طريقة للهروب من خلال منحهم طريقة لإغلاق النافذة المشروطة. ويمكن تحقيق ذلك بالطرق التالية:

• زرالإلغاء
• زر الاغلاق
• مفتاح الهروب
• انقر خارج النافذة

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

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

نصيحة: يجب أن يتطابق عنوان الزر (الذي يقوم بتشغيل النافذة المشروطة) والعنوان المشروط

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

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

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

• الموقع موجود في الجزء العلوي من الشاشة، لأنه في عرض الهاتف المحمول قد تضيع النافذة المشروطة إذا قمت بوضعها في الأسفل.
• الحجم — لا تستخدم أكثر من 50% من شاشة نافذة النموذج.

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

نصيحة حول إمكانية الوصول: اضبط تركيز لوحة المفاتيح على النافذة المشروطة.

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

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

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

فتح نافذة مشروطة  — يجب أن يكون العنصر الذي يستدعي مربع الحوار قابلاً للوصول من لوحة المفاتيح.

نقل التركيز إلى نافذة الحوار — عند فتح نافذة مشروطة، يجب نقل تركيز لوحة المفاتيح إلى البداية.

التحكم في تركيز لوحة المفاتيح — عند نقل التركيز إلى مربع حوار، يجب أن يكون "مقفلاً" بداخله حتى يتم إغلاق مربع الحوار.

إغلاق مربع حوار — يجب أن تحتوي كل نافذة مشروطة على عنصر تحكم يمكن الوصول إليه بلوحة المفاتيح لإغلاق تلك النافذة.

يحدد معيار تطبيقات الإنترنت الغنية التي يمكن الوصول إليها (ARIA) طرقًا لتحسين إمكانية الوصول إلى محتوى الويب وتطبيقات الويب.

يمكن أن تكون علامات ARIA التالية مفيدة عند إنشاء نافذة مشروطة يمكن الوصول إليها: الدور = "الحوار"، aria - مخفي، aria - label

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

إذا تعلم الأشخاص كيفية محاولة إغلاق النوافذ المشروطة تلقائيًا، فلماذا تريد استخدامها؟

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

قائمة تدقيق

• متى نعرض النوافذ المشروطة؟
• كيف نعرض النوافذ المشروطة؟
• كيف تبدو النوافذ المشروطة؟
• ما هي المعلومات التي نقدمها ونجمعها؟

يوجد مكون بديل لواجهة المستخدم للنوافذ المشروطة: غير مشروط أو يُعرف باسم Toast (مصطلح تستخدمه Microsoft وGoogle في التصميم متعدد الأبعاد). اقرأ مشاركتي القادمة لمعرفة المزيد.

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

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

البرنامج المساعد "كشف". لرؤية المكون الإضافي أثناء العمل، انقر فوق الزر "Fire A Reveal Modal" في الصفحة التجريبية.

انقر فوق علامة التقاطع في الصفحة التجريبية لرؤية المكون الإضافي قيد التنفيذ.

البرنامج المساعد jQuery لعرض نموذج الملاحظات في نافذة منبثقة.

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

مربع حوار منبثق أنيق في jQuery.

نوافذ مشروطة منبثقة لطيفة. ثلاثة أنماط. تحتوي الصفحة التجريبية على 3 روابط لفتح النوافذ.

النوافذ المشروطة المنبثقة بعدة أنواع. لرؤية البرنامج المساعد في العمل، انقر على الرابط الموجود في الصفحة التجريبية.

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

قم بتنفيذ مربعات حوار مشروطة حديثة دون استخدام النوافذ المنبثقة وإعادة تحميل الصفحة. في صفحة العرض التوضيحي، انقر فوق الزر "بدء العرض التوضيحي" لرؤية البرنامج النصي قيد التنفيذ.

البرنامج المساعد لعرض المحتوى في النوافذ المشروطة.