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">×</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">×</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">×</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.
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.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
