Membuat popup untuk informasi pada website menggunakan jquery

Untuk membuat popup informasi pada sebuah web kita dapat menggunakan jquery untuk melakukannya

so far it easy to do

popup

pertama

  1. siapkan jquery engine nya
  2. siapkan jquey pop upnya disini kita memakai jquery reveal modal
  3. siapkan file modal (atau file html sebagai induknya

paket file lengkapnya bisa download disini (program belum dimodifikasi)

ini file html induknya

</pre>
<html>

 </head>
 <body>

</body>

</html>

tambahkan css,jquery engine dan jquery pop upnya

/* Attach the Reveal CSS */
<link rel="stylesheet" href="reveal.css">

/* jQuery needs to be attached */
<script src="jquery.min.js" type="text/javascript"></script>

/* Then just attach the Reveal plugin */
<script src="jquery.reveal.js" type="text/javascript"></script>

/* tambahkan jquey enginenya filenya tergantung engine yang anda download disini saya pake jquery-1.7.1.min.js */
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

setting popupnya


<div id="myModal" class="reveal-modal">
<h1>Juduk</h1>
<p>halaman ini berisi informasi yang ingin ditampilkan.</p> <a class="close-reveal-modal">× Tutup</a> </div>

setting eventnya

jika mau langsung keluar pada saat file html nya load oleh browser
tempatkan di head html

<script type="text/javascript">
$('#myModal').reveal({
     animation: 'fadeAndPop',                   //pilih jenis popup fade, fadeAndPop, none
     animationspeed: 300,                       //kecepatan animasi
     closeonbackgroundclick: true,              //if you click background will modal close?
     dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
});
});

jika mau klik baru keluar

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

kode lengkapnya download disini (program sudah dimodifikasi)
referensi http://zurb.com/playground/reveal-modal-plugin

semoga berguna 🙂