Sebenarnya apa itu modal dialog? Yang belum tau apa itu modal, mungkin ada beberapa dari kita yang melihat popup atau tampilan form melayang di web, itulah modal, sebelumnya saya menggunakan modal untuk membuat form login mahasiswa, beberapa web juga membuat pengumuman menggunakan modal. coba kita lihat demo di bawah ini.
Oke, jika kamu sudah tau dan punya gambaraan untuk membuat modall di web, pertama buka code editor kesukaan kalian lalu copy dan paste script nya, berikut adalah kode script nya.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Modal dengan Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<center><h1>Membuat Modal dengan Bootstrap</h1>
<br/>
<!-- Tombol tampil modal-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
<h1>www.StazyLaw.web.id</h1>
</center>
<!-- Mulai Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- konten modal-->
<div class="modal-content">
<!-- heading modal -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Bagian kepala</h4>
</div>
<!-- body modal -->
<div class="modal-body">
<p>bagian badan modal.</p>
</div>
<!-- footer modal -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Keterangan
Kalian bisa mengubah tulisan bagian kepala untuk mengubah header nya, bagian badan untuk mengubah body nya dan bagian Tutup Modal untuk button nya.Selain itu kalian bisa mengubah script
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
