Tutorial Belajar Bootstrap 4 Part 21 – Membuat Modal dengan Bootstrap
Selamat datang lagi di warung belajar, masih dalam seri tutorial mengenai bootstrap 4, dalam tutorial ini kita akan membahas mengenai cara membuat modal dengan bootstrap.
Modal atau biasanya kita kenal dengan istilah popup, modal digunakan untuk menampilkan pesan atau konfirmasi dari sebuah action, anda bisa menggunakan modal ini sebagai tempat untuk menampilkan informasi seperti promosi dll.
Modal juga dapat digunakan untuk membuat sebuah konfirmasi persetujuan contohnya seperti persetujuan dari menghapus data, jadi biasanya kalau kita mau menghapus data, muncul konfirmasi pertanyaan “Apakah anda yakin ingin menghapus data ini ?” terus ada pilihan ya atau tidak, nah pop up kita kita mengenal dengan istilah modal.
Bootstrap memiliki class yang bisa anda gunakan untuk membuat modal dengan mudah, baik langsung saja kita akan bahas mengenai pembuatan modal dengan Bootstrap.
Cara Membuat Modal dengan Bootstrap
untuk contoh pembuatan modal silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html lang="en"> <head> <title>Modal dengan Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Modal</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalku"> Tampil Modal </button> <!-- The Modal --> <div class="modal fade" id="modalku"> <div class="modal-dialog"> <div class="modal-content"> <!-- Ini adalah Bagian Header Modal --> <div class="modal-header"> <h4 class="modal-title">Header Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Ini adalah Bagian Body Modal --> <div class="modal-body"> Body Modal </div> <!-- Ini adalah Bagian Footer Modal --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> |
Semisal kita simpan dengan nama modal_bootstrap, lalu kita buka di browser maka hasilnya :
Keterangan :
- untuk pembuatan modal anda bisa menggunakan tag <div> dengan menggunakan class modal dan class fade, serta anda harus menambahkan id yang nanti digunakan untuk dilinkkan dengan tombol untuk menampilkan modal, dalam hal ini kita berikan id dengan nama modalku, perhatikan line 22, untuk tutup dari tag <div> berada pada line 44
- dalam modal tersebut terdapat 3 bagian, header, body, dan footer
- untuk bagian header bisa diatur diantara tag <div class =”modal-header”> dan </div> pada line 27 – 30
- untuk bagian body bisa diatur diantara tag <div class =”modal-body”> dan </div> pada line 33 – 35
- untuk bagian body bisa diatur diantara tag <div class =”modal-footer”> dan </div> pada line 38 – 40
- setelah membuat bagian modal kita tinggal buat bagian tombol pemicu agar modal dapat ditampilkan, perhatikan line 17, kita hanya perlu menyesuaikan untuk value attribute data-target sesuai dengan id pada bagian modal yang berada pada line 22, sehingga kita tuliskan data-target=”#modalku”
Mengatur Ukuran dan Posisi Modal
Anda juga bisa mengatur untuk ukuran dan posisi modal, untuk contoh perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
<!DOCTYPE html> <html lang="en"> <head> <title>Modal dengan Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Modal Besar</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_kecil"> Tampil Modal Kecil </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_besar"> Tampil Modal Besar </button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_tengah"> Tampil Modal Tengah </button> <!-- The Modal --> <div class="modal fade" id="modal_kecil"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Ini adalah Bagian Header Modal --> <div class="modal-header"> <h4 class="modal-title">Modal Kecil</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Ini adalah Bagian Body Modal --> <div class="modal-body"> Body Modal </div> <!-- Ini adalah Bagian Footer Modal --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="modal_besar"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Ini adalah Bagian Header Modal --> <div class="modal-header"> <h4 class="modal-title">Modal Besar</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Ini adalah Bagian Body Modal --> <div class="modal-body"> Body Modal </div> <!-- Ini adalah Bagian Footer Modal --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="modal_tengah"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <!-- Ini adalah Bagian Header Modal --> <div class="modal-header"> <h4 class="modal-title">Modal Besar</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Ini adalah Bagian Body Modal --> <div class="modal-body"> Body Modal </div> <!-- Ini adalah Bagian Footer Modal --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> |
Semisal kita simpan dengan nama ukuran_modal, lalu kita buka di browser maka hasilnya adalah :
Keterangan :
- pada contoh diatas kita membuat 3 tombol dan 3 modal, untuk modal ukuran besar, ukuran kecil, dan modal yang berada ditengah
- modal pertama untuk ukuran modal kecil, kita perlu menambahkan class modal-sm pada tag <div> yang sudah memiliki class modal-dialog perhatian pada line 30, jadi modal untuk ukuran kecil kita mulai dari mulai line 29 – 51, untuk id kita berikan nama modal_kecil (Line 29) sehingga pada bagian tombol kita tuliskan data-target=”#modal_kecil” (Line 17)
- modal kedua untuk ukuran modal besar, kita perlu menambahkan class modal-lg pada tag <div> yang sudah memiliki class modal-dialog perhatian pada line 55, jadi modal untuk ukuran besar kita mulai dari mulai line 54 – 76, untuk id kita berikan nama modal_besar (Line 54) sehingga pada bagian tombol kita tuliskan data-target=”#modal_besar” (Line 20)
- modal ketiga untuk modal dengan posisi ditengah, kita perlu menambahkan class modal-dialog-centered pada tag <div> yang sudah memiliki class modal-dialog perhatian pada line 79, jadi modal untuk posisi tengah kita mulai dari mulai line 78 – 100, untuk id kita berikan nama modal_tengah (Line 78) sehingga pada bagian tombol kita tuliskan data-target=”#modal_tengah” (Line 24)
Baik sekian dulu teman – teman pembahasan mengenai cara membuat modal dengan bootstrap 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sampai jumpa di tutorial bootstrap selanjutnya.
Informasi ini sangat membantu.