Struktur Dialog Modal
Bina modal berpusat dengan tindanan latar, kawasan kandungan boleh ditatal dan butang tutup menggunakan kedudukan tetap serta utiliti z-index.
Struktur Dialog Modal ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah Itu Dialog Modal
Dialog modal ialah panel tindanan yang muncul di atas halaman untuk menarik perhatian pengguna kepada tugasan tertentu — pengesahan, borang atau maklumat terperinci — sebelum mengembalikan mereka ke halaman di bawahnya.
Modal terdiri daripada tiga bahagian: tindanan backdrop yang menggelapkan latar belakang, panel dialog yang berada di tengah skrin dan mekanisme tutup (butang, kekunci Escape atau klik pada backdrop). Ketiga-tiganya mesti berfungsi bersama untuk menghasilkan komponen yang kemas dan boleh diakses.
Tindanan Backdrop Skrin Penuh
Backdrop menggelapkan kandungan halaman di belakang modal supaya perhatian pengguna tertumpu pada dialog. Gunakan fixed inset-0 bg-black/50 z-40 untuk meliputi seluruh ruang pandang dengan lapisan hitam legap 50%.
Backdrop hendaklah menjadi elemen berasingan daripada panel dialog supaya kedua-duanya boleh dianimasikan secara berasingan. Mengklik backdrop hendaklah menutup modal — perkara ini dicapai dengan pengendali klik JavaScript pada elemen backdrop.
<div
id="modal-backdrop"
class="fixed inset-0 bg-black/50 z-40"
onclick="closeModal()">
</div>Meletakkan Panel Dialog di Tengah
Panel dialog berada di dalam bekas pemusatan yang menggunakan fixed inset-0 flex items-center justify-center z-50 p-4. Bekas ini meliputi seluruh ruang pandang sebagai bekas flex yang memusatkan anak tunggalnya — kotak dialog — secara mendatar dan menegak.
p-4 memastikan dialog mempunyai ruang yang mencukupi dari tepi skrin pada skrin kecil, supaya dialog tidak menyentuh sisi peranti mudah alih.
<!-- Centering container -->
<div class="fixed inset-0 flex items-center justify-center z-50 p-4">
<!-- Dialog panel -->
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
<!-- Modal content -->
</div>
</div>Pengepala Dialog dengan Butang Tutup
Pengepala modal mengandungi tajuk dialog dan butang tutup. Gunakan flex items-center justify-between px-6 py-4 border-b border-gray-100 untuk meletakkan tajuk dan butang tutup pada hujung bertentangan baris pengepala.
Tajuk menggunakan text-lg font-semibold text-gray-900 dan butang tutup ialah butang ikon kecil di hujung kanan. Butang itu mesti mempunyai aria-label='Close modal' untuk pengguna pembaca skrin yang tidak dapat melihat ikon ×.
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 class="text-lg font-semibold text-gray-900" id="modal-title">
Confirm Action
</h2>
<button
onclick="closeModal()"
aria-label="Close modal"
class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100
rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>Kandungan Badan Dialog
Badan modal mengandungi kandungan utama dialog. Gunakan px-6 py-5 untuk jarak dalam yang selesa. Untuk kandungan yang panjang, hadkan ketinggian dengan max-h-96 overflow-y-auto supaya modal tidak menjadi lebih tinggi daripada ruang pandang.
Teks badan menggunakan text-sm text-gray-600 leading-relaxed untuk jarak perenggan yang mudah dibaca. Tambahkan ikon atau ilustrasi untuk kejelasan visual dalam dialog pengesahan dan amaran.
<div class="px-6 py-5">
<div class="flex items-start gap-4">
<!-- Warning icon -->
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
<svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div>
<p class="text-base font-semibold text-gray-900">Delete this record?</p>
<p class="mt-1 text-sm text-gray-600 leading-relaxed">
This action cannot be undone. All data associated with this record will be permanently removed from our servers.
</p>
</div>
</div>
</div>Pengaki Dialog dengan Butang Tindakan
Pengaki modal mengandungi butang tindakan. Gunakan flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100 untuk menjajarkan butang ke kanan dan memisahkannya secara visual daripada kandungan badan.
Letakkan tindakan sekunder (Batal) di sebelah kiri tindakan utama (Sahkan/Padam) selaras dengan kebiasaan ruang, iaitu tindakan selamat di kiri dan tindakan yang merosakkan di kanan.
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100">
<button
onclick="closeModal()"
class="px-4 py-2 text-sm font-semibold text-gray-700 border border-gray-300
rounded-lg hover:bg-gray-50 transition-colors">
Cancel
</button>
<button
class="px-4 py-2 text-sm font-semibold text-white bg-red-600
rounded-lg hover:bg-red-700 transition-colors">
Delete Record
</button>
</div>Memaparkan dan Menyembunyikan Modal
Modal bermula dalam keadaan tersembunyi dengan hidden pada backdrop dan bekas pemusatan. Apabila dicetuskan, JavaScript mengalih keluar hidden daripada kedua-dua elemen dan menambahkan overflow-hidden pada badan untuk menghalang penatalan latar belakang semasa modal terbuka.
Fungsi tutup membalikkan ketiga-tiga operasi tersebut. Sambungkan pencetus kepada mana-mana butang dengan pengendali onclick.
<script>
const modal = document.getElementById('modal');
const backdrop = document.getElementById('modal-backdrop');
function openModal() {
modal.classList.remove('hidden');
backdrop.classList.remove('hidden');
document.body.classList.add('overflow-hidden');
}
function closeModal() {
modal.classList.add('hidden');
backdrop.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}
// Escape key closes the modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
</script>Modal Boleh Ditatal untuk Kandungan Panjang
Apabila kandungan modal lebih panjang daripada ketinggian ruang pandang yang tersedia, jadikan badan sahaja boleh ditatal sementara pengepala dan pengaki kekal tetap. Gunakan max-h-screen overflow-hidden flex flex-col pada panel dialog dan flex-1 overflow-y-auto pada bahagian badan.
Ini menghalang modal daripada melimpah keluar skrin dan memastikan butang tindakan sentiasa kelihatan tanpa pengguna perlu menatal melepasi kandungan.
<div class="fixed inset-0 flex items-center justify-center z-50 p-4">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg
max-h-[90vh] flex flex-col">
<!-- Fixed header -->
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
<h2 class="text-lg font-semibold">Terms of Service</h2>
<button onclick="closeModal()" aria-label="Close">×</button>
</div>
<!-- Scrollable body -->
<div class="flex-1 overflow-y-auto px-6 py-5">
<p class="text-sm text-gray-600 leading-relaxed">
Very long terms of service content that may exceed the viewport height...
<!-- many paragraphs -->
</p>
</div>
<!-- Fixed footer -->
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100 flex-shrink-0">
<button onclick="closeModal()" class="px-4 py-2 text-sm font-semibold text-gray-700 border border-gray-300 rounded-lg">Decline</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Accept</button>
</div>
</div>
</div>Variasi Saiz Modal
Modal hadir dalam saiz yang berbeza bergantung pada kandungannya. Kawal saiz dengan max-w-* pada panel dialog:
- Kecil:
max-w-sm— untuk dialog pengesahan ringkas - Sederhana:
max-w-lg— untuk borang dan kandungan sederhana - Besar:
max-w-2xl— untuk paparan terperinci atau borang kompleks - Penuh:
max-w-5xl— untuk pemapar imej atau kandungan kaya
Sentiasa sertakan w-full minimum supaya modal mengecil dengan sewajarnya pada skrin kecil walaupun lebar maksimumnya besar.
<!-- Small modal -->
<div class="bg-white rounded-xl shadow-2xl w-full max-w-sm p-6">
<p class="text-sm text-gray-700">Are you sure?</p>
<div class="flex justify-end gap-3 mt-4">
<button class="px-3 py-1.5 text-xs font-semibold border border-gray-300 rounded-lg">No</button>
<button class="px-3 py-1.5 text-xs font-semibold text-white bg-red-600 rounded-lg">Yes, delete</button>
</div>
</div>Peranan ARIA untuk Kebolehcapaian Modal
Modal yang boleh diakses memerlukan atribut ARIA tertentu. Tambahkan role='dialog' aria-modal='true' pada panel dialog supaya pembaca skrin mengetahui bahawa elemen itu ialah modal dan kandungan halaman yang lain tidak aktif.
Pautkan tajuk dialog kepada panel dengan aria-labelledby yang menunjuk kepada id pengepala. Ini membolehkan pembaca skrin mengumumkan nama dialog apabila fokus beralih ke dalamnya. Untuk modal tanpa tajuk yang kelihatan, gunakan aria-label terus pada elemen dialog.
<div
role="dialog"
aria-modal="true"
aria-labelledby="dlg-title"
class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 id="dlg-title" class="text-lg font-semibold text-gray-900">
Confirm Deletion
</h2>
<button onclick="closeModal()" aria-label="Close dialog" class="p-1 text-gray-400 hover:text-gray-600 rounded-lg">×</button>
</div>
<div class="px-6 py-5">
<p class="text-sm text-gray-600">This will permanently delete the selected item.</p>
</div>
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100">
<button onclick="closeModal()" class="px-4 py-2 text-sm font-semibold border border-gray-300 rounded-lg">Cancel</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg">Delete</button>
</div>
</div>Menggabungkan Modal Lengkap
Pelaksanaan modal lengkap mempunyai dua bahagian HTML: backdrop dan bekas pemusatan dengan panel dialog di dalamnya. Kedua-duanya bermula dalam keadaan tersembunyi dengan hidden.
Butang pencetus berada di suatu tempat dalam kandungan halaman. Apabila diklik, kedua-dua elemen dipaparkan, penatalan badan dikunci dan fokus beralih ke dalam modal. Apabila modal ditutup (dengan butang, backdrop atau Escape), kedua-dua elemen disembunyikan semula dan penatalan badan dipulihkan.
<!-- Trigger -->
<button onclick="openModal()" class="px-4 py-2 bg-red-600 text-white text-sm font-semibold rounded-lg">Delete Account</button>
<!-- Backdrop -->
<div id="modal-backdrop" onclick="closeModal()"
class="hidden fixed inset-0 bg-black/50 z-40"></div>
<!-- Dialog -->
<div id="modal" role="dialog" aria-modal="true" aria-labelledby="m-title"
class="hidden fixed inset-0 flex items-center justify-center z-50 p-4">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md">
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 id="m-title" class="text-lg font-semibold text-gray-900">Delete Account</h2>
<button onclick="closeModal()" aria-label="Close" class="p-1 text-gray-400 hover:text-gray-600 rounded">×</button>
</div>
<div class="px-6 py-5">
<p class="text-sm text-gray-600">Are you sure? This cannot be undone.</p>
</div>
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100">
<button onclick="closeModal()" class="px-4 py-2 text-sm font-semibold border border-gray-300 rounded-lg">Cancel</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg">Delete</button>
</div>
</div>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: struktur modal terdiri daripada tindanan backdrop (fixed inset-0 bg-black/50 z-40) dan bekas pemusatan (fixed inset-0 flex items-center justify-center z-50) dengan panel dialog di dalamnya; modal boleh ditatal menggunakan flex flex-col max-h-[90vh] dengan flex-1 overflow-y-auto pada badan; dan atribut ARIA role='dialog' aria-modal='true' aria-labelledby diperlukan untuk kebolehcapaian pembaca skrin. Seterusnya, kita akan menganimasikan peralihan buka dan tutup modal.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Struktur Dialog Modal” percuma?
Ya — teks penuh “Struktur Dialog Modal” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Struktur Dialog Modal”?
Bina modal berpusat dengan tindanan latar, kawasan kandungan boleh ditatal dan butang tutup menggunakan kedudukan tetap serta utiliti z-index. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Struktur Dialog Modal” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Struktur Dialog Modal
- Animasi Buka dan Tutup Modal
- Komponen Menu Lungsur
- Modal dan Menu Lungsur yang Mudah Dicapai