0 Membuat Overlay CSS3 Dengan efek jQuery

Nah... sekarang saya akan membocorkannya bahwa saya memberikan efek jquery di dalamnya, seperti yang sobat ketahui banyak efek jquery yang terkenal seperti fancybox, superbox, thickbox dan masih banyak lagi. Sekarang yang akan di bahas adalah efek yang tidak jauh berbeda dengan fungsi overlay yang saya modifikasi di css3nya sehingga akan terlihat lebih menarik, seperti superbox yang sudah lama apabila kita memberikan webkit maka akan terlihat menarik juga di chrome tetapi apabila tidak di berikan webkit maka di chrome tidak terlihat menarik.Ayo siapa yang pakai superbox, facybox,thickbox??
Yups...bingung ya? bagi yang suka bermain dengan jquery pasti tidak bingung, kalu mau lihat contohnya silahkan klik link yang di bawah.


Klik di sini untuk melihat profil Utta!!!

Assalamualaikum,

Nama : Utta
Gue adalah orang biasa, tukang service di rumah, maka dari itu kompi selalu stand by dari pade ga ngapa-ngapain mendingan gue ngeblog aja. Hobi gue sebenernya bukan ngeblog soalnya ngeblog itu cuman buat mengisi waktu aja. Cita-cita gue sebenarnya mau jadi artis (artis kemidi bang?) hehehe..tapi kaga kesampean padahal tampang udah ada kata cewe2 sih gue ganteng gitu...Makanan kesenengan gue burger(jiaaah!!! biasa makan genjer sama nasi doang belaga makan burger) gue ini tamatan S1 di amrik jurusan blok A - pasar rebo, pernah dapet gelar profesor tapi lupa di ambil..Udah segitu aja dulu tentang gue ntar kalu kebanyakan sobat bisa jadi fans nih,, wkwkwkwkwk..udah buruan di tutup!!!

Tutup!!

Nah, kalu sobat tertarik sobat bisa mengkopi kode di bawah kedalam postingan atau template untuk css3 sobat bisa kreasikan sendiri, kalu masih bingung berkreasinya silahkan obok-obok blog ini banyak tutornya tentang cara berkreasi dengan css3.

<a href="javascript:popup('Yups!!! selamat mencoba semoga berguna dan bermanfaat.')">Klik di sini untuk melihat profil Utta!!!</a>

<div id="dialog-overlay">

</div>

<div id="dialog-box">

<div class="dialog-content">

<div style="text-align: center;">

Assalamualaikum,

<img height="160" src="http://i54.tinypic.com/2qx85tc.jpg" title="Gue kaga bisa gaya gue kalu di foto..bisanya dia...aaam" width="250" /></div>

Nama : Utta
Gue
 adalah orang biasa, tukang service di rumah, maka dari itu kompi selalu
 stand by dari pade ga ngapa-ngapain mendingan gue ngeblog aja. Hobi gue
 sebenernya bukan ngeblog soalnya ngeblog itu cuman buat mengisi waktu 
aja. Cita-cita gue sebenarnya mau jadi artis (artis kemidi bang?) 
hehehe..tapi kaga kesampean padahal tampang udah ada kata cewe2 sih gue 
ganteng gitu...Makanan kesenengan gue burger(jiaaah!!! biasa makan 
genjer sama nasi doang belaga makan burger) gue ini tamatan S1 di amrik 
jurusan blok A - pasar rebo, pernah dapet gelar profesor tapi lupa di 
ambil..Udah segitu aja dulu tentang gue ntar kalu kebanyakan sobat bisa 
jadi fans nih,, wkwkwkwkwk..udah buruan di tutup!!!

<div id="dialog-message"></div><a class="button" href="#">Tutup!!</a></div></div>

<style type="text/css">

#dialog-overlay {width:100%; height:100%;filter:alpha(opacity=50);

-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 
0.5;background:#000;position:absolute;top:0; 
left:0;z-index:3000;display:none;}#dialog-box {-webkit-box-shadow: 2px 
4px 60px red;-moz-box-shadow: 2px 4px 60px red;-moz-border-radius: 
10px;-webkit-border-radius:10px;background:#eee;width:628px;position:absolute;z-index:5000;display:none;}#dialog-box
 .dialog-content {text-align:left;padding:5px;margin:13px;color:#000; 
text-shadow: 1px 1px 2px #000;font-family:arial;font-size:15px;}a.button
 {margin:10px auto 0 auto;text-align:center;display: 
block;width:50px;padding: 5px 10px 6px;color: #fff;text-decoration: 
none;font-weight: bold;line-height: 
1;background-color:blue;-moz-border-radius: 5px;-webkit-border-radius: 
5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px
 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px 
rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: 
relative;cursor: pointer;}

a.button:hover {background-color: #c33100;}#dialog-box .dialog-content p
 {font-weight:700; margin:0;}#dialog-box .dialog-content ul {margin:10px
 0 10px 10px;padding:0;height:50px;}

</style>

<script 
src="http://www.yourjavascript.com/14935112009/kotak-pesan-banghendro.txt.js"
 type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {$('a.btn-ok, #dialog-overlay, 
#dialog-box').click(function () {$('#dialog-overlay, 
#dialog-box').hide();return false;});

$(window).resize(function () {if (!$('#dialog-box').is(':hidden')) popup();}); });

function popup(message) {var maskHeight = $(document).height();var 
maskWidth = $(window).width();var dialogTop =  (maskHeight/3) - 
($('#dialog-box').height()); 

var dialogLeft = (maskWidth/2) - 
($('#dialog-box').width()/2);$('#dialog-overlay').css({height:maskHeight,
 width:maskWidth}).show();$('#dialog-box').css({top:dialogTop, 
left:dialogLeft}).show();$('#dialog-message').html(message);}</script>

Keterangan:
- Teks yang berwarna merah sobat bisa ganti

Selamat mencoba, semoga berguna dan bermanfaat,,SALAM TIGA JARI!!!