Modal merupakan salah satu dari komponen Bootstrap yang banyak memberikan manfaat sekaligus memberikan kemudahan untuk mengedit dengan gaya terbang dilayar atau sering kita kenal modal dialog/popup.
Untuk membuat Bootstrap Modal sangat mudah dan tidak membuat pusing, kita dapat lihat contoh dibawah ini dengan menekan tombol...
Kode HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modals</title>
<!-- Bootstrap Css -->
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<!-- button untuk modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#cobamodal">Keluarkan modal Bootstrap</button>
<!-- Mulai membuat modal -->
<div class="modal fade" id="cobamodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- modal header -->
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Judul Modal Disini</h4>
</div>
<!-- modal untuk isi konten -->
<div class="modal-body">
Disini tempat konten atau form
</div>
<!-- modal untuk footer -->
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" type="button">Tutup modal</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Penjelasan
Pada data-toggle="modal" sebagai attribute untuk menampilkan modal/popup dialog. Kemudian data-target="#cobamodal" merupakan poin penting untuk memanggil modal dengan id tersebut. Pada data-dismiss="modal" merupakan attribute untuk menutup dialog modal ketika ditekan tombol tersebut.
Cara Membuat Modal Popup Menggunakan Bootstrap
Reviewed by creativekiller
on
January 08, 2018
Rating:
Reviewed by creativekiller
on
January 08, 2018
Rating:
No comments: