Modal adalah komponen Bootstrap yang digunakan untuk menampilkan jendela popup di atas halaman utama tanpa berpindah halaman.<\/p>\n\n\n\n
Modal biasanya digunakan untuk:<\/p>\n\n\n\n
Saat modal muncul, halaman utama akan menjadi lebih gelap (backdrop).<\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
+----------------------------------+
| HALAMAN UTAMA |
| |
| [ Data Siswa ] |
| |
+----------------------------------+
\u2193 Klik Tambah
+--------------------------+
| Tambah Data Siswa |
|--------------------------|
| Nama : ____________ |
| Kelas: ____________ |
| |
| [Simpan] [Batal] |
+--------------------------+<\/code><\/pre>\n\n\n\n
\n\n\n\nB. STRUKTUR DASAR MODAL<\/h1>\n\n\n\n
Bootstrap menyediakan struktur khusus:<\/p>\n\n\n\n
<div class=\"modal\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
Header
Body
Footer
<\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\nHierarki:<\/p>\n\n\n\n
modal
\u2514\u2500\u2500 modal-dialog
\u2514\u2500\u2500 modal-content
\u251c\u2500\u2500 modal-header
\u251c\u2500\u2500 modal-body
\u2514\u2500\u2500 modal-footer<\/code><\/pre>\n\n\n\n
\n\n\n\nC. MEMBUAT MODAL PERTAMA<\/h1>\n\n\n\nTombol Pemanggil Modal<\/h2>\n\n\n\n<button
class=\"btn btn-primary\"
data-bs-toggle=\"modal\"
data-bs-target=\"#modalSaya\">
Buka Modal
<\/button><\/code><\/pre>\n\n\n\nPenjelasan<\/h3>\n\n\n\nAtribut<\/th> Fungsi<\/th><\/tr><\/thead> data-bs-toggle=”modal”<\/td> Mengaktifkan modal<\/td><\/tr> data-bs-target<\/td> Menentukan modal yang dipanggil<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\nStruktur Modal<\/h2>\n\n\n\n<div class=\"modal fade\"
id=\"modalSaya\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<h5 class=\"modal-title\">
Judul Modal
<\/h5>
<button
class=\"btn-close\"
data-bs-dismiss=\"modal\">
<\/button>
<\/div>
<div class=\"modal-body\">
Ini isi modal.
<\/div>
<div class=\"modal-footer\">
<button
class=\"btn btn-secondary\"
data-bs-dismiss=\"modal\">
Tutup
<\/button>
<\/div>
<\/div>
<\/div>
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nD. MEMAHAMI BAGIAN MODAL<\/h1>\n\n\n\n1. Modal Header<\/h2>\n\n\n\n
Berisi:<\/p>\n\n\n\n
\n- Judul<\/li>\n\n\n\n
- Tombol Close<\/li>\n<\/ul>\n\n\n\n
Contoh:<\/p>\n\n\n\n
<div class=\"modal-header\">
<h5 class=\"modal-title\">
Data Siswa
<\/h5>
<button
class=\"btn-close\">
<\/button>
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\n2. Modal Body<\/h2>\n\n\n\n
Berisi:<\/p>\n\n\n\n
\n- Form<\/li>\n\n\n\n
- Tabel<\/li>\n\n\n\n
- Informasi<\/li>\n\n\n\n
- Gambar<\/li>\n<\/ul>\n\n\n\n
Contoh:<\/p>\n\n\n\n
<div class=\"modal-body\">
Selamat datang di Bootstrap 5.
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\n3. Modal Footer<\/h2>\n\n\n\n
Berisi tombol aksi.<\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
<div class=\"modal-footer\">
<button
class=\"btn btn-secondary\">
Batal
<\/button>
<button
class=\"btn btn-success\">
Simpan
<\/button>
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nE. EFEK ANIMASI MODAL<\/h1>\n\n\n\nDengan Animasi Fade<\/h2>\n\n\n\n<div class=\"modal fade\"><\/code><\/pre>\n\n\n\nModal muncul perlahan.<\/p>\n\n\n\n
\n\n\n\nTanpa Animasi<\/h2>\n\n\n\n<div class=\"modal\"><\/code><\/pre>\n\n\n\nModal muncul langsung.<\/p>\n\n\n\n
\n\n\n\nF. UKURAN MODAL<\/h1>\n\n\n\n
Bootstrap menyediakan beberapa ukuran.<\/p>\n\n\n\n
\n\n\n\nModal Kecil<\/h2>\n\n\n\n<div class=\"modal-dialog modal-sm\"><\/code><\/pre>\n\n\n\nCocok untuk:<\/p>\n\n\n\n
\n- Konfirmasi<\/li>\n\n\n\n
- Notifikasi<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nModal Normal<\/h2>\n\n\n\n<div class=\"modal-dialog\"><\/code><\/pre>\n\n\n\nUkuran standar.<\/p>\n\n\n\n
\n\n\n\nModal Besar<\/h2>\n\n\n\n<div class=\"modal-dialog modal-lg\"><\/code><\/pre>\n\n\n\nCocok untuk:<\/p>\n\n\n\n
\n- Form panjang<\/li>\n\n\n\n
- Detail produk<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nModal Ekstra Besar<\/h2>\n\n\n\n<div class=\"modal-dialog modal-xl\"><\/code><\/pre>\n\n\n\nCocok untuk:<\/p>\n\n\n\n
\n- Tabel data<\/li>\n\n\n\n
- Dashboard mini<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nG. MODAL FULLSCREEN<\/h1>\n\n\n\n
Bootstrap 5 mendukung fullscreen.<\/p>\n\n\n\n
<div class=\"modal-dialog modal-fullscreen\"><\/code><\/pre>\n\n\n\nHasil:<\/p>\n\n\n\n
+--------------------------------+
| |
| MEMENUHI LAYAR PENUH |
| |
+--------------------------------+<\/code><\/pre>\n\n\n\n
\n\n\n\nFullscreen Hanya di Mobile<\/h2>\n\n\n\n<div class=\"modal-dialog
modal-fullscreen-sm-down\"><\/code><\/pre>\n\n\n\nArtinya:<\/p>\n\n\n\n
\n- HP \u2192 Fullscreen<\/li>\n\n\n\n
- Tablet\/Desktop \u2192 Normal<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nH. MODAL SCROLLABLE<\/h1>\n\n\n\n
Jika isi modal panjang.<\/p>\n\n\n\n
<div class=\"modal-dialog modal-dialog-scrollable\"><\/code><\/pre>\n\n\n\nKeuntungan:<\/p>\n\n\n\n
\n- Header tetap<\/li>\n\n\n\n
- Footer tetap<\/li>\n\n\n\n
- Isi dapat discroll<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nI. MODAL VERTIKAL TENGAH<\/h1>\n\n\n\n
Default:<\/p>\n\n\n\n
Atas layar<\/code><\/pre>\n\n\n\nPosisi tengah:<\/p>\n\n\n\n
<div class=\"modal-dialog modal-dialog-centered\"><\/code><\/pre>\n\n\n\nHasil:<\/p>\n\n\n\n
+-------------+
| MODAL |
+-------------+<\/code><\/pre>\n\n\n\n
\n\n\n\nJ. FORM LOGIN DALAM MODAL<\/h1>\n\n\n\n
Contoh implementasi nyata.<\/p>\n\n\n\n
<div class=\"modal-body\">
<div class=\"mb-3\">
<label>Username<\/label>
<input
type=\"text\"
class=\"form-control\">
<\/div>
<div class=\"mb-3\">
<label>Password<\/label>
<input
type=\"password\"
class=\"form-control\">
<\/div>
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nK. FORM REGISTRASI DALAM MODAL<\/h1>\n\n\n\nNama Lengkap
Email
Password
Konfirmasi Password<\/code><\/pre>\n\n\n\nSemua ditempatkan di:<\/p>\n\n\n\n
modal-body<\/code><\/pre>\n\n\n\ndan tombol:<\/p>\n\n\n\n
modal-footer<\/code><\/pre>\n\n\n\n
\n\n\n\nL. MODAL KONFIRMASI HAPUS DATA<\/h1>\n\n\n\n
Kasus paling sering pada aplikasi CRUD.<\/p>\n\n\n\n
<button
class=\"btn btn-danger\">
Hapus
<\/button><\/code><\/pre>\n\n\n\nKetika diklik:<\/p>\n\n\n\n
Apakah Anda yakin ingin
menghapus data ini?
[Ya] [Tidak]<\/code><\/pre>\n\n\n\nContoh:<\/p>\n\n\n\n
<div class=\"modal-body\">
Apakah Anda yakin ingin
menghapus data ini?
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nM. MENAMPILKAN GAMBAR DALAM MODAL<\/h1>\n\n\n\n
Contoh galeri foto.<\/p>\n\n\n\n
<div class=\"modal-body\">
<img
src=\"gambar.jpg\"
class=\"img-fluid\">
<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\nN. MENAMPILKAN TABEL DALAM MODAL<\/h1>\n\n\n\n
Contoh:<\/p>\n\n\n\n
<div class=\"modal-body\">
<table class=\"table\">
<tr>
<th>ID<\/th>
<th>Nama<\/th>
<\/tr>
<\/table>
<\/div><\/code><\/pre>\n\n\n\nCocok untuk:<\/p>\n\n\n\n
\n- Detail transaksi<\/li>\n\n\n\n
- Data siswa<\/li>\n\n\n\n
- Data pelanggan<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nO. EVENT MODAL<\/h1>\n\n\n\n
Bootstrap menyediakan event JavaScript.<\/p>\n\n\n\n
Ketika Modal Dibuka<\/h2>\n\n\n\nvar myModal =
document.getElementById('modalSaya')
myModal.addEventListener(
'show.bs.modal',
function(){
alert(\"Modal dibuka\")
})<\/code><\/pre>\n\n\n\n
\n\n\n\nKetika Modal Ditutup<\/h2>\n\n\n\nmyModal.addEventListener(
'hidden.bs.modal',
function(){
alert(\"Modal ditutup\")
})<\/code><\/pre>\n\n\n\n
\n\n\n\nP. MEMBUKA MODAL DENGAN JAVASCRIPT<\/h1>\n\n\n\n
Tanpa tombol.<\/p>\n\n\n\n
var modal =
new bootstrap.Modal(
document.getElementById(
'modalSaya'
))
modal.show()<\/code><\/pre>\n\n\n\n
\n\n\n\nQ. MENUTUP MODAL DENGAN JAVASCRIPT<\/h1>\n\n\n\nmodal.hide()<\/code><\/pre>\n\n\n\n
\n\n\n\nR. STUDI KASUS APLIKASI SEKOLAH<\/h1>\n\n\n\nKasus 1<\/h2>\n\n\n\n
Tambah Data Siswa<\/p>\n\n\n\n
Saat tombol:<\/p>\n\n\n\n
Tambah Siswa<\/code><\/pre>\n\n\n\ndiklik:<\/p>\n\n\n\n
Modal Muncul<\/code><\/pre>\n\n\n\nBerisi:<\/p>\n\n\n\n
\n- Nama<\/li>\n\n\n\n
- Kelas<\/li>\n\n\n\n
- Jurusan<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nKasus 2<\/h2>\n\n\n\n
Detail Nilai Siswa<\/p>\n\n\n\n
Klik:<\/p>\n\n\n\n
Lihat Detail<\/code><\/pre>\n\n\n\nModal menampilkan:<\/p>\n\n\n\n
\n- Nama<\/li>\n\n\n\n
- Nilai<\/li>\n\n\n\n
- Absensi<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nKasus 3<\/h2>\n\n\n\n
Konfirmasi Hapus<\/p>\n\n\n\n
Klik:<\/p>\n\n\n\n
Hapus<\/code><\/pre>\n\n\n\nModal:<\/p>\n\n\n\n
Yakin menghapus data?<\/code><\/pre>\n\n\n\n
\n\n\n\nLATIHAN PRAKTEK<\/h1>\n\n\n\nLatihan 1<\/h2>\n\n\n\n
Buat modal sederhana berisi:<\/p>\n\n\n\n
\n- Judul<\/li>\n\n\n\n
- Isi pesan<\/li>\n\n\n\n
- Tombol tutup<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nLatihan 2<\/h2>\n\n\n\n
Buat modal login dengan:<\/p>\n\n\n\n
\n- Username<\/li>\n\n\n\n
- Password<\/li>\n\n\n\n
- Tombol Login<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nLatihan 3<\/h2>\n\n\n\n
Buat modal registrasi siswa dengan:<\/p>\n\n\n\n
\n- Nama<\/li>\n\n\n\n
- Alamat<\/li>\n\n\n\n
- Jurusan<\/li>\n\n\n\n
- Tombol Simpan<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nLatihan 4<\/h2>\n\n\n\n
Buat modal fullscreen yang menampilkan:<\/p>\n\n\n\n
\n- Profil sekolah<\/li>\n\n\n\n
- Visi<\/li>\n\n\n\n
- Misi<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nTUGAS PRAKTEK<\/h1>\n\n\n\nTugas Individu<\/h2>\n\n\n\n
Buat halaman Data Siswa menggunakan Bootstrap yang memiliki:<\/p>\n\n\n\n
\n- Tabel Data Siswa<\/li>\n\n\n\n
- Tombol Tambah Data<\/li>\n\n\n\n
- Modal Tambah Data<\/li>\n\n\n\n
- Modal Edit Data<\/li>\n\n\n\n
- Modal Konfirmasi Hapus<\/li>\n<\/ol>\n\n\n\n
\n\n\n\nTugas Proyek SMK<\/h2>\n\n\n\n
Buat aplikasi frontend Sistem Informasi Perpustakaan dengan fitur:<\/p>\n\n\n\n
\n- Dashboard<\/li>\n\n\n\n
- Data Buku<\/li>\n\n\n\n
- Data Anggota<\/li>\n\n\n\n
- Modal Tambah Buku<\/li>\n\n\n\n
- Modal Edit Buku<\/li>\n\n\n\n
- Modal Detail Buku<\/li>\n\n\n\n
- Modal Konfirmasi Hapus<\/li>\n<\/ul>\n\n\n\n
Kriteria Penilaian:<\/strong><\/p>\n\n\n\n\n- Struktur modal benar<\/li>\n\n\n\n
- Responsive<\/li>\n\n\n\n
- Menggunakan Bootstrap 5<\/li>\n\n\n\n
- Menggunakan Form Bootstrap<\/li>\n\n\n\n
- Menggunakan Event Modal<\/li>\n\n\n\n
- Tampilan profesional<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
A. PENGERTIAN MODAL Modal adalah komponen Bootstrap yang digunakan untuk menampilkan jendela popup di atas halaman utama tanpa berpindah halaman….<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[20],"tags":[35],"class_list":["post-616","post","type-post","status-publish","format-standard","hentry","category-tutorial-bootstrap","tag-tutorial-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=616"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/616\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/616\/revisions\/617"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}