Cara Membuat Overlay Modal Box Sederhana Pakai jQuery

Author : Sigit Purnomo | Released : June 13, 2015 | Category :
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

Google+

Linkedin

2 comments

Tulis comments
avatar
load insider
Admin
June 22, 2015 at 10:45 AM

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..

Reply
avatar
June 23, 2015 at 12:49 PM

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

Reply

Silahkan berkomentar sesuai topik yang dibahas