Membuat Modal Dengan Bootstrap
Assalamualaikum wr.wb
Pagi kawan, pada hari ini saya akan sharing tentang bagaimana cara Membuat Modal menggunakan Bootstrap
A. Pengertian
Modal adalah sebuah kotak dialog atau sering di sebut dengann popup yang menampilkan pesan atau konfirmasi untuk suatu aksi, anda bisa membuat promosi dengan modal, membuat persetujuan untuk suatu aksi, misalnya anda membuat aksi untuk menghapus suatu data maka anda bisa menggunakan modal untuk membuat pertanyaan konfirmasi seperti misalnya “apakah anda yakin ingin menghapus data ini ?”. banyak lagi kegunaan dari modal karena anda juga bisa menampilkan data dalam bentuk modal.
B. Latar belakang
Latar belakang belajar materi tersebut, agar bisa membantu para pengguna agar tahu cara Membuat Modal menggunakan Bootstrap.
C. Alat dan Bahan:
- Komputer / Laptop
- Text editor
D. Maksud dan tujuan
Modal dapat dimanfaatkan untuk menampilkan notifikasi / pemberitahuan, atau apapun yang ingin ditampilkan dalam dalam bentuk popup atau modal.
E. Langkah - langkah
1. Download Bootstrap di www.getbootstrap.com
2. Ekstrak kedalam folder file bootstrap yang sudah selesai di download , rename folder menjadi modal
3. Didalam folder modal , buatlah file modal.html atau modal.php . lalu isikan kode seperti dibawah ini :
2. Ekstrak kedalam folder file bootstrap yang sudah selesai di download , rename folder menjadi modal
3. Didalam folder modal , buatlah file modal.html atau modal.php . lalu isikan kode seperti dibawah ini :
<html>
<head>
<title>Menampilkan Modal - Bootstrap Framework</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function(){
$('#myModal').modal('show')
});
</script>
</body>
</html>
4. Download JQuery di www.jquery.com , simpan file jquery di dalam folder modal/js
5. Simpan file latihan_modal.html , kemudian jalankan di browser.
F. Referensi
<head>
<title>Menampilkan Modal - Bootstrap Framework</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(function(){
$('#myModal').modal('show')
});
</script>
</body>
</html>
4. Download JQuery di www.jquery.com , simpan file jquery di dalam folder modal/js
5. Simpan file latihan_modal.html , kemudian jalankan di browser.
F. Referensi
- http://www.webhozz.com/
Assalamualaikum wr.wb