Bootstrap - Modal Demo

Apa Itu Modal?

Halo, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia menarik Bootstrap modals. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk membimbing Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman favorit Anda, nyamanlah, 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 fantastis untuk menampilkan konten tanpa perlu navigasi keluar 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 pembacaan Anda dengan cepat. Bagus, kan?

Bootstrap, teman setia kita dalam desain web, menyediakan komponen modal yang bagus dan mudah digunakan serta dapat diatur sesuai kebutuhan. Mari kita jelajahi bagaimana menerapkannya!

Struktur Modal Dasar

Struktur HTML

Mari kita 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>Konten 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. 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.

Mengaktifkan Modal

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

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

Perhatikan data-toggle="modal" dan data-target="#exampleModal". Ini memberitahu Bootstrap apa yang harus dilakukan ( toggles a 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 Terpusat

Ingin modal Anda terpusat sempurna? Tambahkan kelas modal-dialog-centered:

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

Modal Dapat Scrool

Jika konten modal Anda panjang, Anda dapat membuatnya dapat diスクロール:

<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 ke dalam!

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

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

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

Anda juga dapat mendengarkan event modal:

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

Contoh Praktis: Modal "Konfirmasi Hapus"

Mari kita gabungkan semua dengan contoh dunia nyata. Bayangkan kita sedang 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 bagaimana cara kerja Bootstrap modals. Dari struktur dasar hingga penyesuaian dan bahkan contoh praktis, Anda sekarang dilengkapi untuk menambah fitur kuat ini ke proyek web Anda.

Ingat, latihan membuat sempurna. Cobalah membuat jenis modal yang berbeda, eksperimen dengan ukuran dan penempatan, dan terutama, bersenang-senanglah dengan itu! Siapa tahu, Anda mungkin menjadi "Penguasa Modal" di antara teman Anda pengembang.

Selamat coding, dan semoga modal Anda selalu muncul pada saat yang tepat!

Credits: Image by storyset