Membuat modal pop up di bootstrap
Wednesday 19 November 2014
Edit
Kali ini saya akan jelaskan cara untuk membuat modal pop up dengan jquery dan bootstrap kira kira tampilannya akan seperti ini.
Ketika button di klik maka akan tampil tampilan seperti di bawah ini.
Pertama buatlah sebuah file php kemudian masukkan copas code di bawah ini
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Membuat Modal pop up dengan bootstrap</title>
<!--Sisipkan Bootstrap serta JQuery yang diperlukan-->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<center>
<div style="margin-top:100px">
<!--Link Yang akan memanggil Popup/Modal-->
<a href="#" data-toggle="modal" data-target="#contact" class="btn btn-lg btn-primary">Contact</a>
</div>
</center>
</body>
<!--Sisipkan File (Isi Modal) yang ada di Folder include-->
<?php include "include/dialog.php";?>
</html>
- Kemudian simpan dengan nama index.php
- Langkah selanjutnya buat file php baru lalu copas code dibawah ini
<!-- Modal Pop Up -->
<div class="modal fade" id="contact" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
</div>
<div class="modal-body">
Untuk tutorial yang lain Silahkan Kunjungi <a href="http://www.acchoblues.blogspot.com" target="_blank">www.acchoblues.blogspot.com</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
- Lalu simpan dengan nama dialog.php
- Hore anda sudah membuat modal dialog pop up dengan bootstrap.
Untuk demo bisa di lihat di http://www.modal.niqoweb.com untuk download source code nya di sini www.niqoweb.com semoga bisa bermanfaat bagi yang sedang belajar bootstrap.
Happy Programming