Membuat Bootstrap Modal dan Animasinya pada PHP

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

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

 

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.

 

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

Untuk modal dengan ukuran kecil sobat bisa tambahkan .modal-sm pada classnya menjadi

Untuk modal dengan ukuran besar sobat bisa ganti menjadi .modal-lg pada classnya menjadi

Sedangkan untuk modal dengan ukuran ekstra besar sobat bisa ganti menjadi .modal-xl pada classnya menjadi

 

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

 

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.

 

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

 

2. Background Putih – Jika sobat ingin membuat background bewarna putih maka sobat bisa menambahkan data-backdrop=”false” seperti contoh dibawah

 

3. Backdrop Static – Pada contoh https://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

 

4. Untuk script Modalnya adalah sebagai berikut

 

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

 

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.

Pada tombol Close tambahkan id=”closemodal” untuk memanggil modal hide menggunakan javascript nantinya.

 

3. Pada bagian tuliskan script dari javascriptnya seperti dibawah

 

4. Cara mengubah backdrop menggunakan javascript adalah dengan mengubah pada

Jika ingin membuat backdrop true maka script akan menjadi

Jika ingin membuat backdrop false maka script akan menjadi

Jika ingin membuat backdrop static atau tidak menutup saat klik di luar modal maka script akan menjadi

 

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

 

2. Membuat tombol untuk memanggil modal. Pada contoh akan saya buat seperti dibawah

 

3. Buat script modal beserta isinya yang nantinya akan dibuat animasi, pada contoh akan saya buat seperti ini

 

4. Buat javascriptnya seperti dibawah

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.

Baca juga :

Cara Membuat Custom Modal Menggunakan HTML dan CSS – Part 2

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Demo