Tutorial Bootstrap

Cara Cepat Membuat Modal Menggunakan Bootstrap

Cara Cepat Membuat Modal Menggunakan Bootstrap – Modal atau lebih dikenal sebagai pop-up adalah sebuah tampilan yang biasanya muncul ketika seseorang mengunjungi sebuah halaman web.

Sebuah modal dapat berisi informasi – informasi mengenai apa saja, misalnya saat kamu pertama kali mengakses hompage website ngodeinweb.com ini pasti ada sebuah pop-up bukan?

Yap Modal atau pop-up tersebut berisi tentang cara cepat membuat website secara instan.

Penggunaan modal tersebut tidak sebatas hanya untuk menyampaikan informasi mengenai website, namun juga dapat dimanfaatkan untuk menawarkan jasa, promosi produk, ajakan, iklan dan lain sebagainnya.

Dengan menggunakan framework bootstrap, pembuatan modal akan lebih cepat dan effisien. Mengapa demikian?

Karena bootstrap telah menyediakan class – class untuk membuat modal yang siap dipanggil, tanpa perlu memikirkan layout, width, height , dan lain-lain.

Oke langsung ke topik pembahasan.

Langkah pertama untuk membuat sebuah modal menggunakan bootstrap adalah pastinya kamu harus sudah menginstall atau lebih tepatnya mengunduh framework bootstrap terlebih dahulu. Jika belum, kamu bisa mengikuti langkah-langkah mengunduh bootstrap berikut.

Untuk membuat sebuah modal kita akan menggunakan class modal dan class pendukung lainnya. Perhatikan kode berikut:

Penjelasan :

Baris kode tersebut adalah kode untuk membuat tombol, berisi antara lain data-target=”myModal” yang merupakan id modal yang akan dipanggil.

Id yang akan dipanggil dituliskan kembali di dalam tag modal ( id=”myModal” )

Class .modal-header digunakan untuk membuat judul modal.

Class .modal-body digunakan untuk menampung isi utama dari modal.

Baris kode ini digunakan untuk membuat footer modal, berisi tombol  dengan atribut data-dissmiss=”modal” yang berfungsi untuk menutup modal.

 

Membuat Modal Menggunakan Bootstrap

 

Jika ingin agar modal dapat muncul secara otomatis, silahkan tambahkan script js berikut:

Isi dari modal dapat kamu modifikasi sesuai keinginanmu, misalnya manambahkan tombol, merubah warna, posisi, konten dan lain sebagainnya.

Leave a Reply

Your email address will not be published. Required fields are marked *