Layar Pop Up alias layar munculan pada perangkat yang diterapkan di situs web merupakan layer / lapisan tambahan yang dibuat untuk beberapa keperluan seperti formulir, tombol langganan, dsb. hal ini biasa disebut Modal pada Bootstrap.

Kalian pasti sering lihat hal seperti ini di beberapa situs web, lalu bagaimana cara membuat modal pop up ? Pada artikel ini akan menjelaskan bagaimana cara membuatnya, tapi untuk pengguna Bootstrap saja karena kita akan memanfaatkan class yang telah disediakan oleh Bootstrap.

Modal Pop Up identiknya dengan tombol, ketika tombol tersebut di klik akan muncul layar popup. Jadi, saya akan contohkan menggunakan tombol aja ya. Supaya lebih mantap, saya bagikan kedalam beberapa kategori pembuatan modal sesuai bentuknya. Silahkan tentukan bentuk seperti apa yang diinginkan.

Membuat Modal Pop Up Sederhana Ukuran Kecil

Kita buat tombolnya terlebih dahulu, seperti ini:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contohModalKecil">Modal Kecil</button>

Jika tidak ingin menggunakan tombol, silahkan ganti saja tag button dengan tag yang diinginkan (misalnya tag a href untuk link). Pastikan pada tag nya memiliki class=”btn”, memiliki data-toggle=”modal”, data-target (data-target ini diisi dengan nama id yang akan ditampilkan didalam modal, dibawah ini kita akan membuat modal dengan id contohModalKecil).

Selanjutnya, kita membuat konten yang akan dimunculkan didalam modal tersebut. Seperti ini:

<div class="modal fade" id="contohModalKecil" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          Disini adalah bagian konten yang akan ditampilkan pada layar pop up nanti
        </div>
      </div>
    </div>
  </div>

Silahkan ganti “Disini adalah bagian konten yang akan ditampilkan pada layar pop up nanti” dengan konten yang ingin ditampilkan dan silahkan dicoba !

Sekarang, pop up akan muncul ketika tombol tadi di klik dan tidak terlalu lebar.

Membuat Modal Pop Up Sederhana Ukuran Besar

Karena hanya merubah ukuran Pop Up (bukan ukuran tombol), maka tombol nya tetap sama seperti tadi tidak ada perbedaan. Saya hanya merubah tulisan pada tombolnya saja.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#contohModalBesar">Modal Besar</button>

Tapi pada bagian isi modal perlu ada tambahan sedikit di bagian modal-dialog nya:

<div class="modal fade" id="contohModalBesarl" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-body">
          Disini adalah bagian konten yang akan ditampilkan pada layar pop up nanti
        </div>
      </div>
    </div>
  </div>

Perhatikan pada modal-dialog sekarang memiliki teman yaitu modal-lg yang artinya large. Cukup dengan menambahkan code tersebut maka modal pop up yang tampil akan lebih besar dari modal kecil yang pertama tadi.

(lihat gambar)

Perbedaan dari modal besar kecil ini hanya lebarnya saja, untuk urusan panjang / tinggi itu tergantung isi dari modalnya sendiri. Dan seberapa tinggi pun tidak akan merusaknya, tetap bisa di scroll dengan baik.

Membuat Modal Pop Up Dengan Header

Tidak peduli ukuran, silahkan kalian atur sendiri. Modal pop up kali ini akan memiliki header / kepala di bagian atasnya, biasanya diisi dengan judul. Maka pada codingan isi modal nya perlu ditambahkan sedikit code baru:

<div class="modal fade" id="contohModalHeader" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Ini Contoh Header</h4>
        </div>
        <div class="modal-body">
          Disini adalah bagian konten yang akan ditampilkan pada layar pop up nanti
        </div>
      </div>
    </div>
  </div>

Perhatikan sebelum modal-body ada class modal-header, itu berfungsi untuk menerapkan header pada modal. Pada header ini saya contohkan dengan tag h4, silahkan ganti dengan tag dan isi header yang diinginkan.

Membuat Modal Pop Up Dengan Footer

Footer berada dibagian bawah dari isi modal / modal-body, maka terapkan juga dibawah (setelah) modal-body seperti ini:

<div class="modal fade" id="contohModalFooter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-body">
          Disini adalah bagian konten yang akan ditampilkan pada layar pop up nanti
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-primary">OKE, SAYA FOOTER</button>
      </div>
      </div>
    </div>
  </div>

Disini saya contohkan modal-footer berisi tombol, silahkan tentukan isinya sesuai kebutuhan kalian. (lihat gambar)

Header berada diatas body dan footer berada dibawah body, jika tidak ada header dan body maka akan telanjang bulat body saja.

Membuat Modal Pop Up Tanpa Animasi

Bisa kalian perhatikan disetiap codingan diatas memiliki class fade yang sejajar disamping class modal, itu artinya modal tersebut menggunakan animasi fafe in dan fade out yang sudah disediakan Bootstrap. Jika ingin menghilangkan animasi tersebut tinggal dihapus saja class fade nya.

Membuat Modal Pop Up Dengan Tanda Silang (Close)

Pada contoh-contoh diatas tidak memiliki tanda silang / tanda tutup untuk modal yang tampil. Karena secara default ketika modal itu tampil dan mouse klik di sisi luar modal maka modal tersebut akan tertutup juga. Hal ini disebutnya Overlay Click Close. Tapi jika ingin menambahkan tanda silang untuk menutup modal tersebut silahkan gunakan code berikut:

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

× adalah tag HTML untuk tanda silang / kali (x). Silahkan masukkan kode tersebut didalam modal-body / modal-header / modal-footer, jika diluar itu biasanya tidak bisa di klik pada beberapa browser.

Masih bingung ? Lihat : Video tutorial cara membuat layar munculan Bootstrap.

Dalam pembuatan modal popup ini tentu memerlukan beberapa script yang merupakan bawaan Bootstrap. Pastikan pada situs Bootstrap kalian masih memiliki script-script dan cascading bawaan Bootstrap, jika ada beberapa script atau cascading yang disingkirkan dan didalamnya mengandung class / script yang kita butuhkan untuk modal popup maka wajar saja jika modal itu tidak akan berfungsi.

Selamat mencoba !