Baca Juga : SourceCode CRUD dengan CodeIgniter
Silahkan download terlebih dahulu plugin fancybox git www.fancybox.net atau nanti bisa juga Anda download diakhiran tutorial ini.
Pertama buat file dengan nama index.html
<html>
<head>
<title>Popup Fancybox by Maful Prayoga Arnandi</title>
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="js/fancybox/jquery.fancybox.css">
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js?v=2.0.6"></script>
<script type="text/javascript">
$(".modalbox").fancybox();
</script>
<style>
#inline { display: none; }
</style>
</head>
<body>
<a class='modalbox' href='#inline'>
Send Message
<div id='inline'>
<form id='contact' name='contact' action='#' method='post'>
<p><label>Nama</label></p>
<textarea id='msg' name='msg' class='txtarea' placeholder='Enter your message here' style='background: #FFF; border: 1px solid #DDD; border-radius: 5px; box-shadow: 0 0 5px #DDD inset; color:#666; outline: none; width: 200px; margin-right: 10px; padding: 5px; height: 30px;'></textarea>
<p><label>Pesan</label></p>
<textarea id='msg' name='msg' class='txtarea' placeholder='Enter your message here' style='background: #FFF; border: 1px solid #DDD; border-radius: 5px; box-shadow: 0 0 5px #DDD inset; color:#666; outline: none; width: 550px; margin-right: 10px; padding: 5px; height: 180px;'></textarea>
<p><input type="submit" name="submit" value="Simpan"></p>
</form>
</div>
</a>
</body>
</html>
Hasil skrip diatas akan menampilkan link yang bilamana diklik akan menampilkan pop-up form.
0 komentar:
Post a Comment