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
URL

2 Tanggapan » Lihat

mas, untuk overlay itu aman ga untuk adsense? karna saya blog download sepertinya tombol download akan saya masukan di overlay biar lebih segar dan menarik, selama ini tombol download langsung di artikel dan sekali klik langsugn kelaur idm nya..

saya tidak berani mengatakan aman sob, sebab saya belum mencobanya untuk situs download.

namun justru menyuguhkan tautan download yg menuju situs terlarang & memiliki hak cipta seperti mp3 dll itu yang mengkhawatirkan..

maaf jika jawaban ini kurang memuaskan :D

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini