Cara Membuat Popup dengan Bootstrap Modal, bagaimana cara membuatnya modal bootstrap dan biasa kita sebut popup ?

Kalian pasti pernah melihat popup pada sebuah website seperti ketika kalian login tetap pada halaman yang sama tetapi muncul layar untuk login.

Disini saya akan memberikan cara untuk membuat pop up dengan menggunakan Bootstrap Modal. Caranya cukup mudah kok terus.

Banner IDwebhost

1. Download Bootstrap

Pertama-tama kalian bisa download dulu css dan js dan lain-lainnya di bootstrap berikut linknya https://getbootstrap.com/

Bootstrap Modal https://getbootstrap.com/

Kalian download dulu di websitenya seperti gambar diatas atau kalian bisa menggunakan css dan js yang online.

Baca Juga : Tutorial Membuat Auto Fill Dengan Perintah Select Dengan PHP

2. Buat File Baru untuk membuat Bootstrap modal

Buatlah file baru dengan nama modal.html dan jangan lupa masukkan hasil downloa kalian pada folder pada web yang kalian bikin.

head bootstrap Modal

Pada head diatas saya menggunakan 2 cara yaitu dengan menggunakan css dan js offline dan online.

Kalian bisa menggunakan salah satu saja yahh ,


Dan untuk jQuery nya saya menggunakan yang online agar lebih praktis aja gaiss hehehe.
Jadi jangan sampai lupa buat memasukan css dan js di atas karena jika tidak ada modal tidak dapat berjalan dengan lancar.

Source code Bootstrap Modal

Perhatikan code berikut data-toggle=”modal” data-target=”#mylogin” nah jadi ketika perintah ini di klik maka dia akan memanggil yang mempunyai id mylogin.

Perhatikan code di bodynya id=”mylogin” class=”modal fade” role=”dialog”
pada perintah div yang mempunyai unsur id maka dia lah yang akan di panggil dan menjalankan modal menjadi popup.

dengan adanya bootstrap membuat website lebih mudah dan lebih praktis tidak ribet bukan.
Begitulah caranya kalia harus memperhatikan data-target dan id jangan sampai salah memasukkan perintah tersebut.

Kalian dapat mencobanya di rumah yah gais bagaimana caranya agar kalian bisa mempraktekkan dendiri dan melatih diri anda.

Bagaimana teman-teman semua apakah cukup jelas dengan informasi yang saya berikan dalam tutorial kali ini tentang bootstrap modal semoga dapat bermanfaat dan dapat mempertajam ilmu kalian yang baru belajar membuat website.

Baca Juga : 5 Jurusan Kuliah yang banyak Dibutuhkan Tahun 2021 Mendatang!


0 Komentar

Tinggalkan Balasan

Avatar placeholder

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *