Comment Style Like Lightbox

Pertanyaan pada salah satu komentar di postingan (lupa dimana) sobat Beben si bloglang anu ganteng kalem tea ini menanyakan bagaimana membuat komentar pada blog seperti trik lightbox/popup/modal window :D Sebenarnya dengan berkeliaran web para pengembang jQuery plugins diluaran sana, kita tinggal mencomot script yg memang cocok untuk diterapkan :) Seperti trick satu ini diberi nama "Lights Out – Dimming/Covering Background Content with jQuery" auk dah apaan :P Yang pasti mirip kinerja lightbox, dan tentunya dengan script jQuery.

Bagaimana! mungkin itu yg dimaksudkan sama komentator Beben itu ;) Kalau salah mah, yah ora opo-opo sih hehe :D

Kode CSS

#komentar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: #555 url(http://link-gambar-background.png);
display: none;
}
.msgkotak {
background: #fff;
position: fixed;
width: 555px;
height: 300px;
border: 5px solid #222;
top: 25%;
left: 25%;
}
.tutup {
top: 0px;
float: right;
margin-right: 10px;
}

Script jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

//Adjust height of overlay to fill screen when page loads
$("#komentar").css("height", $(document).height());

//When the link that triggers the message is clicked fade in overlay/msgkotak
$(".alert").click(function(){
$("#komentar").fadeIn();
return false;
});

//When the message box is closed, fade out
$(".tutup").click(function(){
$("#komentar").fadeOut();
return false;
});
});

//Adjust height of overlay to fill screen when browser gets resized
$(window).bind("resize", function(){
$("#komentar").css("height", $(window).height());
});
//]]>
</script>

Letakin diatas tag </body> script tersebut.

Kode HTML

Centang Expand Widget Templates lalu cari kode iframe buat komentar, dan biasanya seperti ini<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>Ganti dengan kode berikut menjadi

<div id='komentar'>
<div class='msgkotak'>
<a class='tutup' href='#'><img src='http://link-gambar-close.jpg'/></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='300' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
</div>
<div id='content'><a class='alert' href='#'>Comment here</a></div>

Gantilah tulisan Comment here dengan image jika suka. SAVE and good luck your comment now have like lightbox b-)