.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Membuat modal pop up di bootstrap

0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

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">&times;</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



Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com


atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Membuat modal pop up di bootstrap, Diterbitkan oleh scodeaplikasi pada Selasa, 18 November 2014. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Tawk.to