Modal adalah komponen yang sering digunakan dalam desain web untuk menampilkan konten tambahan atau pesan kepada pengguna. Dalam Bootstrap 5, membuat modal menjadi lebih mudah dengan menggunakan kelas-kelas yang telah disediakan.
Berikut adalah contoh kode untuk membuat modal dengan Bootstrap 5:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Modal</h3>
<!-- Tombol untuk membuka modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Buka Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Membuat Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>The Modal component is a dialog box/popup window that is displayed on top of the current page</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary">Simpan</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Modal
Dalam contoh di atas, kita menggunakan kelas btn dan btn-primary untuk membuat tombol yang akan membuka modal. Kita juga menggunakan atribut data-bs-toggle="modal" dan data-bs-target="#myModal" untuk menghubungkan tombol dengan modal yang akan ditampilkan.
Modal sendiri didefinisikan dalam elemen <div> dengan kelas modal. Kita menggunakan atribut id untuk memberikan identitas unik pada modal. Di dalam modal, kita memiliki elemen-elemen seperti modal-header, modal-body, dan modal-footer untuk mengatur tampilan dan konten modal.
Dalam elemen modal-header, kita menggunakan elemen <h5> dengan kelas modal-title untuk menampilkan judul modal. Di sisi kanan atas modal, terdapat tombol close yang dapat digunakan untuk menutup modal.
Di dalam elemen modal-body, kita dapat menambahkan konten tambahan sesuai kebutuhan. Di dalam elemen modal-footer, kita dapat menambahkan tombol-tombol aksi seperti tombol tutup dan tombol simpan.
Dengan menggunakan kode di atas, Anda dapat membuat modal dengan mudah menggunakan Bootstrap 5. Anda dapat menyesuaikan tampilan dan konten modal sesuai dengan kebutuhan proyek Anda.
Leave a Reply