HasanOnta - Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana atau konfirmasi untuk suatu aksi, misalnya sobat ingn mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal
Bootstrap memberikan plugin yang berfungsi untuk membuat modal, modal yang dihasilkan cukup bagus dan cara membuatnya pun mudah
CARA MEMBUAT MODAL DENGAN BOOTSTRAP
contoh :
<!DOCTYPE html><html><head> <title>Bootstrap Part 15 : Membuat Modal dengan Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head><body> <div class="container"> <center><h1>Membuat Modal dengan Bootstrap | <a href="http://www.HasanOnta.ga">HasanOnta</a></h1></center> <br/> <!-- Tombol untuk menampilkan modal--> <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
<!-- 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"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Bagian heading modal</h4> </div> <!-- body modal --> <div class="modal-body"> <p>Bagian Body Modal</p> </div> <!-- footer modal --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button> </div> </div> </div> </div> </div></body></html>
Output :
Akan saya jelaskan tentang pembuatan modal Bootstrap
data-target="#myModal"
Pada tombol, isi dari atribut tersebut menentukan id modal yang akan dimunculkan ketika tombol "Buka Modal" diklik . Perhatikan pada contoh modal diatas.
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bagian heading modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Bagian Body Modal</p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
class "fade" berfungsi untuk memberi efek memudar ketika modal terbuka dan menutup
data-dismiss="modal"
atribut data-dismis seperti diatas memiliki fungsi untuk menutup modal. Kemduian modal memiliki bagian kepala atau heading, body dan footer
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bagian heading modal</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>Bagian Body Modal</p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
Sobat bisa ganti isi dari heading body dan footer modal sesuai keninginan sobat. Dan jika ingin memperkecil ukuran modal sobat dapat menambahkan class "modal-sm" dan untuk memperbesar modal tambahkan class "modal-lg"
KESIMPULAN
Bootstrap menyediakan fasilitas modal yang responsive dan mudah untuk digunakan. Kita tidak perlu susah payah membuat plugin modal tinggal memanggil classnya saja kita dapat membuat modal tersebut dan yang dihasilkan pun memuaskan
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar