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 🙂

Iklan

tinggalkan pesan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: