Cara membuat Bootstrap Modal dan Animasinya menggunakan animate.css dengan Data dan Javascript – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang bootstrap modal. Ada banyak versi bootsrap dan pada tutorial kali ini saya membuat dengan bootsrap terbaru yaitu bootsrap 4. Dengan menggunakan bootstrap kita tidak perlu repot2 membuat modal secara manual karena kita tinggal pakai saja. Pada postingan ini nantinya saya juga akan memberikan cara menggunakan animate.css pada bootsrap sobat sehingga saat modal keluar dan saat modal ditutup bisa juga ada animasinya sehingga website sobat tidak terlihat membosankan karena hanya itu-itu saja.
Untuk menampilkan modalnya bisa menggunakan HTML yaitu data-toggle=”modal” data-target=”#modaltanpaanimasi” atau bisa juga menggunakan javascript yaitu $(‘#modaljavascript’).modal(); yang nantinya akan saya bahas juga pada tutorial dibawah ini.
Baca juga :
Cara Membuat SweetAlert dan Macam-Macamnya pada PHPMembuat Bootstrap Modal dan Animasinya pada PHP
Membuat CRUD Expert & Pencarian dengan JQuery, Ajax, Bootstrap Modal, SweetAlert dan WYSIHTML5 pada PHP – PART 1 MENAMPILKAN DATA
Cara Membuat Modal Menggunakan Data
Contoh pertama yaitu membuat modal menggunakan HTML. Namun sebelumnya saya beritahukan bahwa ada 4 macam modal yaitu modal kecil, sedang, besar, ekstra besar. Nanti akan saya berikan contohnya satu persatu.
1. Sebelum membuat modal pertama sobat harus masukkan terlebih dahulu librari bootsrap, jquery, dan propper pada tag head dan body seperti dibawah
1
2
3
4
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Karena keperluan demo jadi saya menggunakan librari online dan nanti hanya bisa diakses menggunakan internet walaupun di localhost sekalipun. Oleh karena itu jika sobat ingin menggunakannya secara offline maka sobat harus mendownload terlebih dahulu dan disimpan pada folder project sobat. Kemudian ganti url pada src=”” dengan mengarah ke file yang sudah di download tadi.
2. Membuat tombol untuk memanggil modal. Pada contoh akan saya buat seperti dibawah
1
2
3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalfade">
Modal Animasi Fade
</button>
3. Buat script modal berserta isinya, untuk demo saya buat simpel seperti dibawah. Modal tersebut mempunyai animasi standar bootstrap yaitu animasi fade. Modal pada contoh ini juga merupakan modal dengan ukuran standar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="modal fade" id="modalfade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Animasi Fade</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Ini Adalah isi dari modal animasi fade
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
4. Jika sobat klik tombol maka akan muncul tampilan seperti dibawah
Cara diatas merupakan modal dengan ukuran sedang atau standar bawaan bootstrap, utuk membuat modal dengan ukuran yang sobat inginkan sobat bisa ubah pada bagian
1
<div class="modal-dialog">
Untuk modal dengan ukuran kecil sobat bisa tambahkan .modal-sm pada classnya menjadi
1
<div class="modal-dialog modal-sm">
Untuk modal dengan ukuran besar sobat bisa ganti menjadi .modal-lg pada classnya menjadi
1
<div class="modal-dialog modal-lg">
Sedangkan untuk modal dengan ukuran ekstra besar sobat bisa ganti menjadi .modal-xl pada classnya menjadi
1
<div class="modal-dialog modal-xl">
Cara Membuat Modal Scrollable
Pada contoh diatas adalah modal standar. Namun jika sobat ingin membuat modal yang berisi data sangat panjang bagaimana? Maka sobat bisa menggunakan scrollable. Modal ini bisa digunakan untuk membuat form yang mempunyai isian banyak atau bisa juga untuk membuat disclaimer modal. Karena nanti isinya akan panjang sekali namun pada bagian footer tombol Close atau Setuju masih tetap terlihat jadi yang discroll hanya bagian bodynya saja. Caranya adalah sebagai berikut :
1. Membuat tombol untuk memanggil modal. Pada contoh akan saya buat seperti dibawah
1
2
3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalscrollable">
Modal Dapat di Scroll
</button>
2. Buat script modal berserta isinya, untuk demo saya buat simpel seperti dibawah. Modal tersebut mempunyai animasi standar bootstrap yaitu animasi fade. Modal pada contoh ini juga merupakan modal dengan ukuran standar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="modal fade" id="modalscrollable" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Scrollable</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Ini Adalah isi dari modal scrollable
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
3. Jika sobat klik tombol maka akan muncul tampilan seperti dibawah
Cara Membuat Modal Backdrop (Background)
Saya sudah memberikan contoh modalnya secara bawaan pada bootstrap 4, modal sudah mempunyai background hitam transparan jadi kita tidak perllu mencari cara membuat background hitam lagi. Jika sobat sudah mengikuti cara diatas namun background tidak hitam maka sobat perlu cek lagi versi bootstrap nya. Secara default juga jika kita klik di luar modal maka secara otomatis modal akan tertutup dan kita bisa saja membuatnya statis. Ada 3 macam custom backdrop yaitu :
1. Background hitam – Pada tombol untuk memanggil modal jika ingin membuat background belakang berwarna hitam (jika sobat background masih berwarna putih maka bisa coba cara ini), karena sebenarnya walaupun tidak ada juga tidak apa-apa karena secara default background berwarna hitam, caranya adalah tambah kan data-backdrop=”true” seperti contoh dibawah
1
2
3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalBackdrop" data-backdrop="true">
Modal Data Backdrop (true)
</button>
2. Background Putih – Jika sobat ingin membuat background bewarna putih maka sobat bisa menambahkan data-backdrop=”false” seperti contoh dibawah
1
2
3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalBackdrop" data-backdrop="false">
Modal Data Backdrop (false)
</button>
3. Backdrop Static – Pada contoh //dewankomputer.com/2019/01/21/membuat-bootstrap-modal-dan-animasinya-pada-php/ketiga ini adalah cara membuat modal tidak hilang saat diklik bagian di luar modal. Caranya adalah menambahkan data-backdrop=”static” sehingga scriptnya jadi seperti dibawah
1
2
3
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalBackdrop" data-backdrop="static">
Modal Data Backdrop (static)
</button>
4. Untuk script Modalnya adalah sebagai berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="modal fade" id="modalBackdrop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Backdrop</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Ini Adalah isi dari modal Backdrop
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Cara Membuat Modal Menggunakan Javascript
Pada contoh diatas semua menggunakan data jadi itu hanya ada di tombolnya. Namun kita juga bisa memanggil dan menutup modal menggunakan javascript. Caranya adalah sebagai berikut :
1. Membuat tombol untuk memanggil modal. Pada contoh akan saya buat seperti dibawah
1
2
3
<button type="button" id="buttonjavascript" class="btn btn-primary">
Modal Tampil & Tutup Javascript
</button>
2. Buat script modal berserta isinya, untuk demo saya buat simpel seperti dibawah. Modal tersebut mempunyai animasi standar bootsrap yaitu animasi fade. Modal pada contoh ini juga merupakan modal dengan ukuran standar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="modal fade" id="modaljavascript" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Javascript</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Ini Adalah isi dari modal tampil dan tutup dengan javascript.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="closemodal">Close</button>
</div>
</div>
</div>
</div>
Pada tombol Close tambahkan id=”closemodal” untuk memanggil modal hide menggunakan javascript nantinya.
3. Pada bagian tuliskan script dari javascriptnya seperti dibawah
1
2
3
4
5
6
7
8
9
<!-- Modal Javascript -->
<script type="text/javascript">
$('#buttonjavascript').click(function() {
$('#modaljavascript').modal();
});
$('#closemodal').click(function() {
$('#modaljavascript').modal('hide');
});
</script>
4. Cara mengubah backdrop menggunakan javascript adalah dengan mengubah pada
1
$('#modaljavascript').modal();
Jika ingin membuat backdrop true maka script akan menjadi
1
$('#modaljavascript').modal({backdrop: true});
Jika ingin membuat backdrop false maka script akan menjadi
1
$('#modaljavascript').modal({backdrop: false});
Jika ingin membuat backdrop static atau tidak menutup saat klik di luar modal maka script akan menjadi
1
$('#modaljavascript').modal({backdrop: "static"});
Cara Membuat Modal dan Animasi
Setelah kita belajar membuat modal menggunakan data dan selanjutnya menggunakan javascript sekarang kita membuat modal dengan animasinya. Pada contoh kali ini tentunya berhubungan juga dengan contoh satu dan dua karena kita menggunakan data+javascript. Caranya adalah sebagai berikut
1. Pertama tentunya memasukkan css animate.css pada tag head seperti dibawah
1
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
2. Membuat tombol untuk memanggil modal. Pada contoh akan saya buat seperti dibawah
1
2
3
<button type="button" title="Tampil tada, Tutup rollOut" class="btn btn-primary" data-toggle="modal" data-target="#modalanimate">
Modal Bootsrap + Animate.css
</button>
3. Buat script modal beserta isinya yang nantinya akan dibuat animasi, pada contoh akan saya buat seperti ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="modal fade" id="modalanimate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" width="100%">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal Bootstrap + Animate</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Ini Adalah isi dari modal Modal + Animate.css dengan animasi muncul <b>tada</b> dan tutup <b>rollOut</b>.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
4. Buat javascriptnya seperti dibawah
1
2
3
4
5
6
7
8
9
<!-- Bootstrap + Animate.css -->
<script type="text/javascript">
$('#modalanimate').on('show.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog tada animated');
})
$('#modalanimate').on('hide.bs.modal', function (e) {
$('.modal .modal-dialog').attr('class', 'modal-dialog rollOut animated');
})
</script>
Pada bagian modal-dialog tada animated artinya menggunakan animasi tada yang merupakan animasi yang ada pada animate.css. Untuk nama animasinya selengkapnya sobat bisa lihat pada demo.
Tidak terasa ternyata lama juga membuat postingan ini. Sekian postingan saya tentang Membuat Bootstrap Modal dan Animasinya pada PHP. Jika ada salah-salah saya mohon maaf. Apabila ada pertanyaan maka bisa tinggalkan pada kolom komentar dibawah. Mungkin saya akan membahas tentang animasi memunculkan modal lagi tapi entah kapan hehehe tunggu saja atau search saja pada kolom searching diatas.