Membuat Popup Modal Dinamis dengan Javascript

Hallo semuanya, pada artikel sebelumnya kita sudah membahas tentang cara membuat pop up modal kegunaan modal pada sebuah website adalah sesuatu yang opsional, bisa kalian gunakan ataupun tidak. Bootstrap 4 saat ini sudah memberikan banyak sekali fitur unik seperti yang saya bahas pada artikel berjudul membuat masonry layout dengan bootstrap 4 atau juga mengatur align grid horizontal pada bootstrap 4 dan cara mengatur align grid vertical pada bootstrap 4­­_­.

Bootstrap adalah Front-end framework untuk membuat sebuah website yang responsive atau dapat dijalankan disemua ukuran layar. Bootstrap ini juga sangat mempermudah dalam membangun sebuah website dengan cepat. Pada artikel kali ini kita akan membahas tentang popup modal. Di artikel saya sebelumnya kita sudah mencoba membuat modal sederhana menggunakan bootstrap 4. Sekarang kita akan coba membuat modal dinamis bootstrap 4 dengan bantuan javascript

Disini kita akan membuat tiga buah tombol sebagai trigger, pada tombol trigger yang kita buat akan ditambahkan satu property data-isi sebagai data dinamis.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-isi="Web Master">Paket 1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-isi="Desain Grafis">Paket 2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-isi="Digital Marketing">Paket 3</button>

Selanjutnya kita akan membuat sebuah struktur modal dinamis yang bisa kita gunakan untuk menampilkan data dari trigger yang ada.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Submit Masukan Paket </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Nama Paket:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Kesan Belajar:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Sekarang kita perlu mendefinisikan property data-isi dengan menggunakan bberapa baris javascript dibawah

  $('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var recipient = button.data('isi')
    var modal = $(this)
    modal.find('.modal-title').text('Submit Masukan Paket  ' + recipient)
    modal.find('.modal-body input').val(recipient)
  })

Baiklah teman-teman untuk demo lebih jelasnya bisa kalian lihat dibawah ini.