Bootstrap - Modal Demo

Apa Itu Modal?

Hai, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menarik Bootstrap modals. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengorbit Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman favorit Anda, rasa nyaman, dan mari kita mulai petualangan modal bersama!

Definisi dan Tujuan

Modal, dalam istilah pengembangan web, adalah seperti jendela pop-up yang muncul di atas halaman saat ini. Ini adalah cara yang bagus untuk menampilkan konten tanpa pergi dari tampilan saat ini. Bayangkan Anda membaca artikel, dan tiba-tiba Anda ingin informasi lebih lanjut tentang istilah tertentu. Daripada membuka halaman baru, modal dapat muncul dengan detail tambahan, memungkinkan Anda kembali ke bacaan Anda dengan cepat. Bagus, kan?

Bootstrap, teman terpercaya kita dalam desain web, menyediakan komponen modal yang bagus dan mudah digunakan serta dapat dikustomisasi. Mari kita jelajahi bagaimana menerapkannya!

Struktur Modal Dasar

Struktur HTML

Mulai dengan struktur HTML dasar dari modal Bootstrap:

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Judul Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Text body modal disini.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary">Simpan perubahan</button>
</div>
</div>
</div>
</div>

mari kitauraikan ini:

1. <div> luar dengan kelas modal adalah wadah untuk modal keseluruhan kita.
2. Di dalamnya, kita memiliki modal-dialog yang memusatkan konten modal.
3. modal-content div memegang konten nyata modal kita.
4. Kita kemudian memiliki tiga seksi utama:

• modal-header: Mengandung judul dan tombol tutup.
• modal-body: Tempat konten utama.
• modal-footer: Biasanya mengandung tombol aksi.

Menampilkan Modal

Sekarang, bagaimana kita membuat modal ini muncul? Kita butuh pemicu! Biasanya ini adalah tombol:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

Catat data-toggle="modal" dan data-target="#exampleModal". Ini memberitahu Bootstrap apa yang harus dilakukan (toggle modal) dan modal mana yang harus ditampilkan (yang memiliki id "exampleModal").

Jangan lupa menambahkan id ke modal Anda yang cocok dengan data-target:

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- Konten modal di sini -->
</div>

Menyesuaikan Modal

Ukuran

Bootstrap memungkinkan Anda mudah mengubah ukuran modal Anda. Hanya tambahkan kelas ke modal-dialog div:

<!-- Modal kecil -->
<div class="modal-dialog modal-sm">...</div>

<!-- Modal besar -->
<div class="modal-dialog modal-lg">...</div>

<!-- Modal ekstra besar -->
<div class="modal-dialog modal-xl">...</div>

Modal Terasa

Ingin modal Anda terletak di tengah? Tambahkan kelas modal-dialog-centered:

<div class="modal-dialog modal-dialog-centered">...</div>

Modal Bisa Scrool

Jika konten modal Anda panjang, Anda bisa membuatnya bisa scrool:

<div class="modal-dialog modal-dialog-scrollable">...</div>

Menambah Fungsionalitas dengan JavaScript

Meskipun atribut data Bootstrap bagus untuk fungsionalitas dasar, kadang-kadang Anda memerlukan kendali lebih. Itu di mana JavaScript masuk!

// Menampilkan modal
$('#exampleModal').modal('show');

// Menyembunyikan modal
$('#exampleModal').modal('hide');

// Toggle modal
$('#exampleModal').modal('toggle');

Anda juga dapat mendengarkan acara modal:

$('#exampleModal').on('shown.bs.modal', function () {
console.log('Modal sekarang terlihat!');
});

Contoh Praktis: Modal "Konfirmasi Hapus"

Marilah kita gabungkan semua ini dengan contoh dunia nyata. Bayangkan kita membuat aplikasi daftar tugas, dan kita ingin mengkonfirmasi sebelum menghapus tugas:

<!-- Tombol hapus -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
Hapus Tugas
</button>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Konfirmasi Hapus</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Apakah Anda yakin ingin menghapus tugas ini? Tindakan ini tidak dapat dibatalkan.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-danger" id="confirmDelete">Hapus</button>
</div>
</div>
</div>
</div>

Dan ini adalah JavaScript untuk menghandle penghapusan:

$('#confirmDelete').on('click', function() {
// Kode untuk menghapus tugas disini
console.log('Tugas dihapus!');
$('#deleteModal').modal('hide');
});

Kesimpulan

Selamat! Anda baru saja belajar tentang Bootstrap modals. Dari struktur dasar ke kustomisasi dan bahkan contoh praktis, Anda sekarang dilengkapi untuk menambah fitur kuat ini ke proyek web Anda.

Ingat, latihan membuat sempurna. Cobalah membuat berbagai jenis modals, eksperimen dengan ukuran dan posisi, dan terutama, bersenang-senang! Siapa tahu, Anda mungkin menjadi "Penguasa Modal" di antara teman Anda pengembang.

Happy coding, dan semoga modals Anda selalu muncul di saat yang tepat!

Credits: Image by storyset