Modal adalah jendela pop up yang muncul ketika ada aksi dari pengunjung yang menampilkan pesan atau konfirmasi, misalnya kita membuat sebuah aksi untuk menghapus maka kita bisa menggunakan modal untuk membuat pertanyaan konfirmasi misalnya “apakah anda yakin menghapus data ini ?”.Selain itu banyak lagi keguanaan dari modal popup. Nah pada kesempatan kali ini kita akan coba membuat sebuah modal popup dengan bootstrap. Di Bootstrap untuk membuat modal popup sangat mudah karena kita hanya tinggal mengcopykan baris program yang sudah di sediakan oleh Bootstrap seperti berikut,
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<!-- tombol untuk menghilangkan modal ini -->
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bagian header</h4>
</div>
<!-- body modal, disini kita simpan pesan atau konfirmasinya -->
<div class="modal-body">
<p>bagian isi.</p>
</div>
<!-- footer modal / bagian bawah dari modal popup -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
<h4 class="modal-title">Bagian header</h4>
</div>
<!-- body modal, disini kita simpan pesan atau konfirmasinya -->
<div class="modal-body">
<p>bagian isi.</p>
</div>
<!-- footer modal / bagian bawah dari modal popup -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
Untuk memanggilnya kita buat tombol seperti ini,
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
pada tombol tersebut terdapat atribut data-target="#myModal" fungsinya adalah untuk menampilkan modal popup yang memiliki id myModal.
Untuk lebih jelasnya bisa lihat contoh di link Berikut
Semoga bermanfaat ..
0 komentar:
Post a Comment