Kali ini admin ingin berbagi tutorial cara membuat kotak pop-up dengan bootstrap, bagi para newbie khususnya kalian tidak perlu punya kemampuan yang mendalam tentang javascript dan css untuk membuat kotak pop-up. Kotak Pop-up ini nantinya dapat kita gunakan untuk membuat box informasi, form, atau dimodifikasi sesuai dengan keinginan kalian.
Membuat Kotak Pop-up dengan Bootstrap
Kotak Pop-up di dalam bootstrap disebut dengan modal, anda dapat menggunakan plugin javascript bootstrap untuk membuat box dialog, pesan, atau form inputan.- Buka editor kalian, lalu copy paste script di bawah ini. dan save dengan nama latihan.html
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
- Copy paste script di bawah ini dan letakkan di bawah <body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
- save dokumen yang kalian buat
- lalu buka dokumen dengan browser
Penjelasan dari script di atas
Di bawah ini hanya penjelasan singkat dari script-script di atas, jadi jangan bingun dengan script di bawah ini :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
Di bawah ini adalah script modalnya, kalian dapat mengganti "..." sesuai dengan kebutuhan kalian. Kalian dapat memberikan informasi, box dialog, atau bisa juga membuat form dengan modal
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
Bagaimana, cukup mudah bukan membuat pop-up dengan modal bootstrap. Dengan menggunakna framework ini anda tidak perlu punya skill yang mendalam tentang javascript dan css. Tampilannya keren dan responsive untuk semua perangkat. Jika anda benar-benar paham dengan tutorial kali ini pembuatan pop-up ini tidak perlu memakan waktu lebih dari 5 menit. Ok, demikian tutorial dari saya mudah-mudahan bermanfaat bagi kita semua.
tetep aja min gak responsive
ReplyDeleteseharusnya responsive, coba aja buat pure bootstrap tanpa tambahan css
DeleteBos gimana ubah ukuran button nya
ReplyDeletesmall = btn-sm
Deletelarge = btn-lg
extra small = btn-xs
kalo mau full panjang pake btn-block
Bro Req Pop Up Komentar Yang Kaya Tombol Back To Top Button Bang Jadi posisi Tombol Komen itu ada Di Bawah pojok kiri kaya tombol scroll to top button
ReplyDeletebolehlah, nanti saya pikirkan. thnks kunjungannya mas
Deletebos kalau mau bikin form pengisian data pribadi menggunakan popup gimana ya?
ReplyDeletesilahkan baca artikel yang ini mas https://www.sahretech.com/2019/12/study-case-membuat-aplikasi-crud.html
ReplyDeletedisitu ada cara membuat modal/popup form tambah dan edit
Bang , Kalo mau buat Bio Pop up gimana ya bang? , lgi butuhh buat tugas
ReplyDeletekamu bisa pake tabel atau form, klo tabel buat dua kolom, kolom keterangan sama isian. Pake form juga bisa, tinggal didisabled aja formnya biar datanya gak bisa diganti. Klo kamu mau refrensi tampilan biodata bisa searching di google dengan kata kunci "profile bootstrap style" atau yang semacamnya. Contohnya banyak di internet bisa langsung copas
DeleteBang saya udh ada web demo, jd jika di klik muncul pop up tersebut. bagaimana cara menghubunginnya? TOlong di balas bang terimakasih
ReplyDeletepasang script ini mas
Delete<script type="text/javascript">
$(window).on('load', function() {
$('#exampleModalLong').modal('show');
});
</script>
Cara biar ketika web dibuka lalu popup muncul otomatis (tanpa harus klik tombol Launch demo modal) gimana ya bang?
ReplyDelete<script type="text/javascript">
Delete$(window).on('load', function() {
$('#exampleModalLong').modal('show');
});
</script>
Cara menampilkan gambar di poupnya gimana itu bang
ReplyDeletemantappp dari 6 web ini yg sukses.. wkwkw ty
ReplyDeleteAlhamdulillah, terima kasih atas kunjungannya :)
Delete