Untuk membuat popup informasi pada sebuah web kita dapat menggunakan jquery untuk melakukannya
so far it easy to do
pertama
- siapkan jquery engine nya
- siapkan jquey pop upnya disini kita memakai jquery reveal modal
- 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 🙂
Ambilgratis.com - kami mengumpulkan informasi yang terserak dan tersebar 