تقدم هذه المقالة مثالاً لاستخدام HTML5 وCSS3 لإنشاء مربع مشروط ومشاركته مع الجميع، والتفاصيل هي كما يلي:
مثال على كود المصدرربما لا ترغب في قراءة مجموعة من التعليمات المطولة أدناه، وترغب في عرض الكود المصدري مباشرة أو مثال عبر الإنترنت. الرابط أدناه عبارة عن مربع مشروط وظيفي قمت بإنشائه باستخدام انتقال CSS3 والعتامة وحدث المؤشر وسمات أخرى.
يمكنك النقر عليه للانتقال إلى Github لعرض الكود المصدري: ModalBox-Tutorial
هيكل HTMLيتم تشغيل مكونات الواجهة الأمامية بواسطة سيناريوهات الأعمال والتفاعل، ولا تعد المربعات المشروطة استثناءً من ذلك، يتمثل السيناريو الشائع في تنفيذ عملية ما، مثل النقر فوق زر، ثم عرض مربع مشروط لتقديم تعليقات للمستخدم أو توجيه المستخدم. لتنفيذ واجهة أسفل. قد يتضمن تفاعل المربع المشروط 5 خطوات:
1. يوجد زر أو رابط ينقر عليه المستخدم لتشغيل عرض المربع المشروط؛
2. عندما يتم عرض المربع المشروط، ستكون هناك طبقة قناع شفافة تحجب إطار العرض الحالي بالكامل؛
3. سيظهر محتوى الصندوق المشروط في موضع معين (عادةً الأوسط) من إطار العرض بلون غير شفاف (أبيض عادةً)؛
4. سيكون لمحتوى المربع المشروط (عادة في الزاوية اليمنى العليا) علامة إغلاق، سيؤدي النقر فوقه إلى إخفاء المربع المشروط؛
5. يجب تحديد محتوى مربع الوسائط بناءً على سيناريو العمل الفعلي، بحيث يمكن أن يكون بأي هيكل.
أسلوب
1. تم إخفاء .modalbox في البداية؛
1.modalbox عبارة عن طبقة قناع شفافة؛
2.modalbox-dialog عبارة عن طبقة محتوى غير شفافة؛
3. بعد النقر على رابط إظهار مربع الوسائط، سيتم عرض .modalbox؛
4. بعد النقر على .modalbox- Close-btn، سيتم إخفاء .modalbox؛
مثال التأثير
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.