Modal Bootstrap adalah komponen UI yang digunakan untuk menampilkan konten tambahan dalam sebuah tampilan yang mengambang di atas konten yang sedang ditampilkan. Modal biasanya digunakan untuk menampilkan informasi atau konfirmasi sebelum melanjutkan ke tindakan selanjutnya. Dalam artikel ini, kita akan membahas cara membuat modal Bootstrap dan beberapa opsi konfigurasi yang tersedia.


Langkah 1: Menambahkan Kode Bootstrap

Pertama-tama, pastikan kamu sudah memasukkan kode Bootstrap ke dalam proyek web kamu. Untuk memulai, kamu bisa menambahkan kode berikut ke dalam bagian head pada halaman HTML kamu:

php
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

Langkah 2: Membuat Tombol untuk Membuka Modal

Untuk membuka modal, kita perlu membuat sebuah tombol atau elemen yang akan menampilkan modal ketika di klik. Berikut ini adalah contoh kode HTML untuk membuat tombol:

kotlin
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Buka Modal
</button>

Pada kode di atas, kita membuat sebuah tombol dengan class "btn" dan "btn-primary". Data-toggle digunakan untuk memberi tahu Bootstrap bahwa tombol ini digunakan untuk membuka modal. Sedangkan data-target digunakan untuk menentukan id dari modal yang akan ditampilkan ketika tombol ini di klik.

Langkah 3: Membuat Modal

Setelah tombol untuk membuka modal sudah dibuat, langkah selanjutnya adalah membuat modal itu sendiri. Berikut adalah kode HTML untuk membuat modal:

php
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Judul Modal</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      
      <!--Modal Body -->
<div class="modal-body">
<p>Isi modal akan ditampilkan di sini</p>
</div>
<!-- Modal footer -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Simpan Perubahan</button>
  </div>
  
</div>
</div>
</div>


Pada kode di atas, kita membuat sebuah div dengan class "modal" dan id "myModal". Di dalam div tersebut, terdapat beberapa elemen seperti div dengan class "modal-dialog" dan div dengan class "modal-content". Kita juga menambahkan header, body, dan footer pada modal menggunakan elemen-elemen yang tersedia di Bootstrap.

Langkah 4: Menampilkan Modal

Terakhir, kita perlu menambahkan script untuk menampilkan modal ketika tombol untuk membuka modal di klik. Berikut adalah kode script yang perlu ditambahkan di bawah kode HTML:

php
<script>
$(document).ready(function(){
  $("#myModal").modal('show');
});
</script>

Pada kode di atas, kita menggunakan jQuery untuk menampilkan modal ketika dokumen siap. Kita menggunakan method modal('show') untuk menampilkan modal dengan id "myModal".

Kesimpulan

Itulah langkah-langkah untuk membuat modal Bootstrap dan menampilkannya pada halaman web kamu. Bootstrap memiliki banyak opsi konfigurasi lain yang bisa kamu gunakan untuk menyesuaikan tampilan modal sesuai dengan kebutuhan kamu. Kamu bisa membaca dokumentasi Bootstrap untuk mengetahui opsi konfigurasi lainnya. Semoga artikel ini bermanfaat untuk kamu dalam mempelajari Bootstrap!