Belajar Bootstrap: 4. Membuat Modal Pop Up di Bootstrap

 Belajar Bootstrap: 4. Membuat Modal Pop Up di Bootstrap - Okay pada pembelajaran ke 4 di Bootstrap ini, kita akan belajar membuat modal. Apa itu Modal? modal adalah dialog yang biasanya muncul secara popup biasanya digunakan untuk confirmasi, berita, pengumuman, bahkan sampai tambah/edit data:

Contoh Modal PopUp Bootstrap

Nah gambar di atas adalah contoh modal berbentuk popup, pasti sudah familiar bukan melihat tampilan seperti itu dan biasanya digunakan di website - website.

Disini kita melanjurkan seri ke  3 yang sebelumnya kita sudah membuat slider/carousel, jadi dibawahnya tinggal kita tambahkan kode berikut:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Penjelasan, disini kita menggunakan button untuk memanggil modalnya, button disana akan mentriger modal block yang memiliki id yang sama dengan data target dari buttonya.

Nah simpan projectnya lalu kembali ke browser dan refresh.

Untuk demo codenya ada di codepen saya : https://codepen.io/egiesem/pen/yLVmoBj

Semoga bermanfaat!