CSS Modal Oluşturucu

Oluşturulan CSS neleri kapsar

Kod beş sınıfı biçimlendirir:

• .modal-backdrop: sabit tam ekran katman, koyu yarı saydam arka plan (rgba(17, 24, 39, .62)), ortalanmış ızgara ve panelin çevresinde 24 px boşluk.
• .modal-panel: min(100%, Npx) genişliğinde beyaz kart, seçtiğiniz köşe yarıçapı, yumuşak gölge ve kesilmiş köşeler.
• .modal-header: sizin renginizde 4 px kalınlığında vurgu çubuğu, altında 20 px 24 px iç boşluklu başlık alanı.
• .modal-body: 18 px 24 px iç boşluklu içerik alanı.
• .modal-actions: aralarında 10 px boşluk olan, sağa hizalı düğme sırası.

Karşılık gelen HTML yapısı

CSS şu işaretlemeyi bekler:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Onayla</h2>
    </div>
    <div class="modal-body">
      <p>Devam etmek istediğinize emin misiniz?</p>
    </div>
    <div class="modal-actions">
      <button>İptal</button>
      <button>Devam Et</button>
    </div>
  </div>
</div>

Paneli arka planın içinde tutun: arka plan sabit katmandır ve panel onun ortasında durur. Modali açıp kapatmak için arka planı uygulama kodunuzdan ekleyip kaldırın ya da görünürlüğünü değiştirin.

Küçük ekranlara uyum

Panel genişliği min(100%, Npx) ile sınırlanır; bu yüzden 520 px ayarı dar bir telefonda, arka planın 24 px boşluğu çıkarıldığında, görünüm alanının tam genişliğine dönüşür. Eylem sırası sağa hizalı kalır ve uzun içerik sayfayla birlikte kayar. Olağan durumlar için medya sorgusu gerekmez.

Notlar ve sınırlar

Oluşturucu yalnızca CSS üretir. Modali açıp kapatacak, klavye odağını tutacak veya ESC tuşunu işleyecek JavaScript içermez. Bu mantığı uygulamanıza siz eklersiniz.

Başlık her zaman 4 px kalınlığındaki vurgu çubuğunu korur; gerekmiyorsa kopyalanan koddaki kuralı kaldırın ya da rengini değiştirin.