Thursday, June 28, 2012

Jquery Lightbox Effect

CSS

#lightbox {
 display:none;
 background:#000000;
 opacity:0.9;
 filter:alpha(opacity=90);
 position:absolute;
 top:0px;
 left:0px;
 min-width:100%;
 min-height:100%;
 }
 #lightboxPanel {
 display:none;
 position:fixed;
 top:100px;
 left:50%;
 margin-left:-200px;
 width:400px;
 background:#FFFFFF;
 padding:10px 15px 10px 15px;
 border:2px solid #CCCCCC;
 z-index:2; }


Jquery

$('#ShowPanel').click(function(){
 $('#lightbox,#lightboxPanel').fadeIn(300);
 });
 $('#close').click(function(){
 $('#lightbox,#lightboxPanel').fadeOut(300);
 });

HTML
---------------------

Lightbox

Close

No comments:

Post a Comment