Cara Membuat Overlay Modal Box Sederhana Pakai jQuery

Hallo sobat blogger, kali ini saya mau share tutorial singkat tapi padat yang semoga bermanfaat.

Minat? silahkan merapat dan saksikan penampakan kilat berikut ini:

Selamat datang pengunjung..

Terimakasih telah melihat DEMO dari tutorial sederhana ini
Selamat mencicipi :D

Untuk memasangnya di Blogger, ikuti langkah-langkahnya:

1. Taruh CSS ini diatas </b:skin>
.overlay{width:100%;height:100%;position:fixed;top:0;left:0;display:none;z-index:99999;background:rgba(0,0,0,0.7)}
.resizable{display:block;width:500px;height:300px;background:#f3f3f3;padding:10px;padding-bottom:60px;margin:100px auto;border:2px solid gray;border-radius:5px;overflow:hidden;position:relative;box-shadow:0 2px 5px #000;z-index:103}
.ui-resizable-helper{border:1px dotted gray}
.resizable iframe{width:100%;height:100%;display:none}
.close-button{width:20px;height:20px;background:#000;border-radius:50%;border:3px solid #fff;box-shadow:0 0 5px rgba(0,0,0,.7);display:block;color:#fff;text-align:center;text-decoration:none;position:absolute;top:0;right:0;cursor:pointer}

2. Taruh jQuery ini diatas </body>
<script>
$(document).ready(function(){$("#btndemo").click(function(){$("#overlay, .resizable, iframe").fadeIn(1e3),$(".resizable iframe").css("display","block")}),$("#boxclose").click(function(){$("#overlay, .resizable, iframe").fadeOut(1e3),$("iframe").attr("src",function(a,b){return b}),$("iframe").hide()})});
</script>

3. Taruh kedua url script ini diatas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Bila kedua sumber script diatas telah ada pada template Anda, jangan ditambahkan lagi, karena bisa error

4. Simpan markup HTML ini kemanapun yang Anda suka. Bisa di halaman posting, template maupun tata letak.
<button id="btndemo" class="demo">TAMPILKAN OVERLAY</button>
<div class="overlay" id="overlay"><div class="resizable" >
<a class="close-button" id="boxclose">x</a>
<h3>Selamat datang pengunjung..</h3>
Terimakasih telah melihat DEMO dari tutorial sederhana ini<br />Selamat mencicipi :D
</div></div>

5. Selesai.. Lihat hasilnya

Popular posts from this blog

Cara Mudah Ambil Uang di ATM BRI (+gambar)

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir

Cara Mengetahui Hari Kelahiran Weton Jawa - Online