مولّد النوافذ المنبثقة بـ CSS

ما الذي يغطيه CSS المُنشأ

يُنسّق الكود خمس فئات:

• .modal-backdrop: طبقة ثابتة بملء الشاشة بخلفية داكنة شبه شفافة (rgba(17, 24, 39, .62))، شبكة في المنتصف و24 بكسل مساحة حول اللوحة.
• .modal-panel: بطاقة بيضاء بعرض min(100%, Npx)، ونصف قطر الزوايا الذي اخترته، وظل ناعم، وزوايا مقطوعة.
• .modal-header: شريط مميّز بعرض 4 بكسل بلونك، ثم منطقة العنوان بحشوة 20 بكسل 24 بكسل.
• .modal-body: منطقة المحتوى بحشوة 18 بكسل 24 بكسل.
• .modal-actions: صف أزرار بمحاذاة اليمين مع مسافة 10 بكسل بينها.

بنية HTML المطابقة

يتوقع CSS هذا الترميز:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>تأكيد</h2>
    </div>
    <div class="modal-body">
      <p>هل تريد المتابعة فعلاً؟</p>
    </div>
    <div class="modal-actions">
      <button>إلغاء</button>
      <button>متابعة</button>
    </div>
  </div>
</div>

أبقِ اللوحة داخل الخلفية: الخلفية هي الطبقة الثابتة وتتوسّط اللوحة داخلها. لفتح النافذة وإغلاقها، أدخل الخلفية وأزلْها من كود تطبيقك، أو بدّل إظهارها.

التكيّف مع الشاشات الصغيرة

يُقيَّد عرض اللوحة بـ min(100%, Npx)، لذا فإن إعداد 520 بكسل يصبح على الهاتف الضيّق عرض نافذة المتصفح كاملة مطروحًا منه مسافة الخلفية البالغة 24 بكسل. يبقى صف الإجراءات بمحاذاة اليمين، ويتم تمرير المحتوى الطويل مع الصفحة. لا حاجة إلى استعلامات الوسائط في الحالات الشائعة.

ملاحظات وحدود

يُنتج المولّد CSS فقط. لا يتضمّن JavaScript لفتح النافذة أو إغلاقها أو حصر تركيز لوحة المفاتيح أو معالجة مفتاح ESC. أضِف هذا المنطق في تطبيقك.

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