Modal dengan Konten Dinamis pada Bootstrap 5

Saat ini sudah umum bila sebuah website menggunakan modal sebagai sebuah fitur interaktif. Modal memberikan konten yang tidak langsung muncul ketika sebuah halaman web dimuat.

Bootstrap sebagai sebuah toolkit frontend yang populer saat ini menyediakan modal sebagai salah satu komponenya.

Pada Bootstrap, modal diaktifkan dengan kode berikut:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Demo Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Judul Modal</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup Modal</button>
        <button type="button" class="btn btn-primary">Simpan Perubahan</button>
      </div>
    </div>
  </div>
</div>

Dengan mengklik/menyentuh tombol ‘Demo Modal’ maka sebuah modal akan muncul.

Silakan mengacu ke halaman referensi Modal di website Bootstrap untuk referensi lebih lengkap.

Konten Dinamis pada Modal

Contoh di atas bersifat statis, yaitu data ditempatkan di dalam modal. Tapi bagaimana kalau misalnya sejumlah tautan atau link dengan pola yang sama, tentunya akan lebih mudah apabila cukup sebuah modal yang dibuat, dibandingkan bila satu tautan menggunakan satu modal.

Konten dinamis pada modal dapat dibuat dengan menulis sebuah tautan dengan kode HTML sebagai berikut:

<a 
  href="#" 
  class="btn btn-danger"
  data-bs-toggle="modal"
  data-bs-target="#hapusModal"
  data-bs-link="/berita/hapus/34"
  data-bs-headline="Olimpiade Paris 2024 Dibuka"
>
  Hapus
</a>

Modal dapat dibuat dengan kode sebagai berikut:

<!-- Modal Begins -->
<div class="modal fade" id="hapusModal"
    tabindex="-1"
    aria-labelledby="hapusModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Konfirmasi Penghapusan</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<!-- Modal Ends -->

Atribut kelas modal-body adalah tempat kita menempatkan pesan, sedangkan kelas modal-footer sebagai tempat tautan atau link.

Selanjutnya untuk meneruskan data, kita buat kode JavaScript sebagai berikut:

<script>
var hapusModal = document.getElementById('hapusModal')
hapusModal.addEventListener('show.bs.modal', function (event) {
  // Tombol yang memicu modal
  var button = event.relatedTarget
  // Ambil info dari atribut-atribut data-bs-*
  var link = button.getAttribute('data-bs-link')
  var headline = button.getAttribute('data-bs-headline')
  // Update isi modal.
  var modalBody = hapusModal.querySelector('.modal-body')
  var modalLink = hapusModal.querySelector('.modal-footer')

  modalBody.textContent =
    'Anda akan menghapus artikel berjudul `'
    + headline
    + '`. Apakah Anda yakin?'
  modalLink.innerHTML =
    '<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>'
    + '<a class="btn btn-danger btn-sm" href="'
    + link
    + '">Hapus</a>';
})
</script>

Bila tombol ‘Hapus’ diklik/disentuh, maka akan tampil sebuah modal seperti di bawah ini:

di mana apabila kita menekan tombol ‘Hapus’ maka akan diantar ke tautan /berita/hapus/34 yang telah ditetapkan sebelumnya pada tombol ‘Hapus’.

Kode yang lebih lengkap dapat dilihat pada Codepen:

Demikian artikel mini mengenai konten dinamis pada modal Bootstrap 5, semoga bermanfaat.