Assallamuallaikum Wr Wb ,.
Halo kawan kawan , pada kesempata kali ini saya akan sedikit berbagi tentang Membuat Modal dengan Bootstrap. Untuk membuat modal atau pesan yang tampil pada satu halman web kawan kawan harus menyiapkan file bootstrapnya terlebih dahulu downlload disini.
PENGERTIAN
Modal adalah sebuah kotak dialog atau sering disebut dengan popup yang menampilkan pesana atau konfirmasi untuk suatu aksi, misalnya sobat ingn mebuat aksi menghapus data maka akan muncul kotak dialog yang kurang lebihnya seperti ini " Apakah anda ingin menghapus data ini ? " Banyak lagi yang dapat dilakukan oleh modal karna modal juga dapat menampilkan data dalam bentuk modal.
Agar lebih jelasnya di bawah ini adalah contoh dari script modal yang saya buat. Pada pembuatan modal ini saya menggunakan file bootstrap dan saya jadikan satu directory dengan file HTML nya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
h2 {
font-family: raleway;
text-align: center;
}
.btn {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<h2>MODAL PADA BOOTSTRAP</h2>
<!-- Membuat TOmbol untuk memunculkan modal -->
<center>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">CLICK TOMBOL UNTUK MUNCUL MODAL</button> </center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">JUDUL MODAL</h4>
</div>
<div class="modal-body">
<p>Isi dari modal , belajar membuat modal dengan bootstrap</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
 |
| Hasil run , sebelum tombol di tekan |
 |
| Ketika tombol di tekan , modal muncul |
Ok saya akan menjelaskan sedikit tentang script di atas.
- Pada bagian tombol terdapat script id-target="#myModal" Nah script tersebutlah yang memanggil modal agar muncul.
- Pada bagian modal maka kita beri id="myModal" agar dapat di panggil oleh id-target pada button.
- Perhatikan script di atas, terdapat script class="modal fade" , script tersebut digunakan agar memberi efek tampil dari modal.
- Terdapat juga data-dismiss="modal" , script tersebut digunakan untuk menutup modal.
- Di atas juga terdapat bagian bagian dari modal yaitu, modal="header" sebagai judul modal. dan modal="body" sebagai isi / content modal.
KESIMPULAN
Bootstrap menyediakan fasilitas modal yang responsive dan mudah untuk digunakan. Kita tidak perlu susah payah membuat plugin modal tinggal memanggil classnya saja kita dapat membuat modal tersebut dan yang dihasilkan pun memuaskan.
EmoticonEmoticon