Lightbox cực nhẹ dùng CSS và jQuery

/*------------------POPUPS------------------------*/
#fade{display:none;background:#000;position:fixed;left:0;top:0;width:100%;height:100%;opacity:.80;z-index:
 99;}.popup_block{display:none;background:#393829;border:10px solid
#FFF;float:left;font-size:1.2em;position:fixed;top:50%;left:50%;z-index:
 999;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px
#000;box-shadow:0 0 20px
#000;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;padding:10px;}img.btn_close{float:right;margin:-30px
 -30px 0 0;}.popup p{margin:5px 0;padding:5px 10px;}*html #fade,*html
.popup_block{position:absolute;}

$(document).ready(function(){                     
 
  $('a.poplight[href^=#]').click(function() {
      var popID = $(this).attr('rel');
      var popURL = $(this).attr('href');
           
      //Pull Query & Variables from href URL
      var query= popURL.split('?');
      var dim= query[1].split('&');
      var popWidth = dim[0].split('=')[1];

 
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth )
}).prepend('<a href="#" class="close"><img
src="http://i27.servimg.com/u/f27/14/67/90/38/close_10.png"
class="btn_close" title="Close Window" alt="Close" /></a>');
     
 
      var popMargTop = ($('#' + popID).height() + 80) / 2;
      var popMargLeft = ($('#' + popID).width() + 80) / 2;
     

      $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
      });
     
      //Fade in Background
      $('body').append('<div id="fade"></div>');
      $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
      return false;
  });
 
 
  //Close Popups and Fade Layer
  $('a.close, #fade').live('click', function() {
        $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove(); 
  }); //fade them both out
     
      return false;
  });

 
});Nguồn bài viết: http://www.fmvi.tk/t16-lightbox-cc-nh-dung-css-va-jquery#ixzz1PsRzk4Ib

$(document).ready(function(){                     
 
  $('a.poplight[href^=#]').click(function() {
      var popID = $(this).attr('rel');
      var popURL = $(this).attr('href');
           
      //Pull Query & Variables from href URL
      var query= popURL.split('?');
      var dim= query[1].split('&');
      var popWidth = dim[0].split('=')[1];

 
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth )
}).prepend('<a href="#" class="close"><img
src="http://i27.servimg.com/u/f27/14/67/90/38/close_10.png"
class="btn_close" title="Close Window" alt="Close" /></a>');
     
 
      var popMargTop = ($('#' + popID).height() + 80) / 2;
      var popMargLeft = ($('#' + popID).width() + 80) / 2;
     

      $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
      });
     
      //Fade in Background
      $('body').append('<div id="fade"></div>');
      $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
      return false;
  });
 
 
  //Close Popups and Fade Layer
  $('a.close, #fade').live('click', function() {
        $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove(); 
  }); //fade them both out
     
      return false;
  });

 
});

<script src="LINK TRANG HTML" type="text/javascript"></script>

<div id="popup_name" class="popup_block">
[Nội dung]</div>

<a href="#?w=500" rel="popup_name" class="poplight">Learn More</a>