Cara menggunakan auto popup modal bootstrap
|
Dengan Bootstrap keperluan membuat sebuah kotak dialog atau modal dapat dilakukan dengan mudah, fleksibel dan modern. Show Berikut contoh dan tutorial yang bisa digunakan dalam pembuatan sebuah kotak dialog/modal. Cara Membuat Modal BootstrapUntuk membuat modal dengan bootstrap silahkan pelajari contoh modal berikut : Contoh :<button class="btn btn-default" data-toggle="modal" data-target="#tesModal"> Buka Modal button> <div class="modal fade" id="tesModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×span>button> <h4 class="modal-title" id="myModalLabel">Judul Modalh4> div> <div class="modal-body"> Konten yang ingin ditampilkan disini div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal">Tutupbutton> div> div> div> div> Hasil :Uji coba Ukuran ModalSecara default Bootstrap Modal memiliki nilai ukuran medium, tapi untuk keperluan lainnya bootstrap sudah menyediakan nama class untuk mengatur ukuran dari Modal tersebut. Nama class yang bisa digunakan untuk mengatur modal adalah 0 (ukuran kecil), dan dituliskan setelah class dasar 1 Contoh Large Modal<button class="btn btn-default" data-toggle="modal" data-target="#tesModal"> Buka Modal button> <div class="modal fade" id="tesModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×span>button> <h4 class="modal-title" id="myModalLabel">Judul Modalh4> div> <div class="modal-body"> Konten yang ingin ditampilkan disini div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal">Tutupbutton> div> div> div> div> Hasil :Uji coba Contoh Small Modal<button class="btn btn-default" data-toggle="modal" data-target="#tesModal"> Buka Modal button> <div class="modal fade" id="tesModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"><span>×span>button> <h4 class="modal-title" id="myModalLabel">Judul Modalh4> div> <div class="modal-body"> Konten yang ingin ditampilkan disini div> <div class="modal-footer"> <button class="btn btn-danger" data-dismiss="modal">Tutupbutton> div> div> div> div> Hasil :Uji coba Efek Animasi Memudar dan MenghapusnyaMaksud dari animasi memudar adalah modal akan tampil dan hilang secara perlahan atau adanya jeda waktu Efek animasi memudar ditentukan oleh nama class 2 pada class dasar 3, contoh modal efek fade/memudar dapat dilihat pada contoh contoh sebelumnya Jika tidak menginginkan efek fade pada modal cukup menghapus nama class 2 pada class dasar 3 Apa itu bootstrap modal?Membuat Modal dengan Bootstrap – Modal atau yang biasa di sebut pop up pada bootstrap adalah sebuah kotak dialog yang biasanya di gunakan untuk melakukan konfirmasi atas suatu aksi. Misal, ketika anda ingin menghapus suatu data, anda bisa menggunakan modal ini sebagai pesan konfirmasi atas aksi apa yang anda lakukan.
Apa itu modal web?Modal adalah kotak dialog yang muncul pada halaman web. Cara kerja modal adalah ketika modal dalam kondisi aktif maka dialog box akan tampil dan halaman utamanya menjadi tidak aktif, namun halaman utama tetap dapat terlihat pada jendela browser.
|
