Mengenal Jenis-jenis Modal Popup pada Bootstrap

Pop Up atau modal popup sering kali kita lihat pada hampir setiap web, tujuan diberikan popup adalah untuk memberikan informasi kepada pengguna tentang suatu hal. Ada banyak sekali jenis popup box yang bisa kita temukan, mulai dari tampilan sederhana sampai dengan tampilan yang sangat menarik sekali untuk kita lihat. Nah, berikut ada beberapa jenis popup box yang bisa kalian pakai dalam memberikan sebuah informasi pada tampilan web. Simak selengkap nya jenis-jenis modal popup pada Bootstrap.

Didalam framework Bootstrap ada beberapa jenis modal dari segi ukuran, mulai dari yang sederhana atau normal, ukuran kecil sampai dengan ukuran yang besar bisa kita gunakan sesuai kebutuhan. Bagi kalian yang sedang mempelajari framework Bootstrap bisa kalian praktekan sendiri modal popup berikut.

Silahkan kalian ketikan kode modal popup Bootstrap berikut.

<div class="container">
  <div class="row text-center">
      <h3>Modal Normal</h3>
      <a href="#" class="btn btn-info" data-toggle="modal" data-target="#basicModal">Click Here</a>
  </div>
  <div class="row text-center">
      <h3>Modal Besar</h3>
      <a href="#" class="btn btn-lg btn-warning" data-toggle="modal" data-target="#largeModal">Click Here</a>
  </div>
  <div class="row text-center">
      <h3>Modal Kecil</h3>
      <a href="#" class="btn btn-sm btn-default" data-toggle="modal" data-target="#smallModal">Click Here</a>
  </div>
</div>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal Normal</h4>
      </div>
      <div class="modal-body">
        <h3>Lorem Ipsum...</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal Besar</h4>
      </div>
      <div class="modal-body">
        <h3>Lorem Ipsum...</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal Kecil</h4>
      </div>
      <div class="modal-body">
        <h3>Lorem Ipsum...</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Pada kode Bootstrap diatas telah saya gabung beberapa jenis modal popup Bootstrap, jika telah selesai menuliskan kode Bootstrap diatas, silahkan buka pada browser dan lihat hasilnya. Maka ketika kita klik tombol popup akan muncul popup berbagai ukuran sesuai yang telah kita tentukan pada kode Bootstrap nya.

Mengenal Jenis-jenis Modal Popup pada Bootstrap

Bagaimana, lumayan bukan untuk menambah referensi kita dalam membuat modal popup, mudah dan simpel. Sekian artikel tentang jenis-jenis modal popup pada Bootstrap, semoga bermanfaat dan selmat mencoba.

28 September 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat