Generator Modal CSS

Apa saja yang dicakup CSS yang dihasilkan

Kode ini menata lima kelas:

• .modal-backdrop: lapisan tetap layar penuh, latar gelap semi-transparan (rgba(17, 24, 39, .62)), kisi di tengah, dan 24 px ruang di sekeliling panel.
• .modal-panel: kartu putih dengan lebar min(100%, Npx), radius sudut pilihan Anda, bayangan lembut, dan sudut terpotong.
• .modal-header: batang aksen setebal 4 px sesuai warna Anda, lalu area judul dengan padding 20 px 24 px.
• .modal-body: area isi, dengan padding 18 px 24 px.
• .modal-actions: deretan tombol rata kanan dengan jarak 10 px.

Struktur HTML yang sesuai

CSS mengharapkan markup berikut:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Konfirmasi</h2>
    </div>
    <div class="modal-body">
      <p>Yakin ingin melanjutkan?</p>
    </div>
    <div class="modal-actions">
      <button>Batal</button>
      <button>Lanjutkan</button>
    </div>
  </div>
</div>

Letakkan panel di dalam latar: latar adalah lapisan tetap dan panel berada di tengahnya. Untuk membuka dan menutup modal, pasang dan lepas latar dari kode aplikasi Anda, atau alihkan tampilannya.

Menyesuaikan layar kecil

Lebar panel dibatasi dengan min(100%, Npx), jadi pengaturan 520 px menjadi lebar penuh viewport di ponsel sempit, dikurangi 24 px ruang latar. Deretan aksi tetap rata kanan, dan konten panjang ikut bergulir bersama halaman. Tidak perlu media query untuk kasus umum.

Catatan dan batasan

Generator hanya menghasilkan CSS. Kode tidak menyertakan JavaScript untuk membuka atau menutup modal, mengunci fokus keyboard, atau menangani tombol ESC. Tambahkan logika tersebut di aplikasi Anda.

Header selalu mempertahankan batang aksen setebal 4 px; jika tidak diperlukan, hapus atau ubah warna aturan itu di kode hasil salinan.