Lightbox cực nhẹ

thêm vào css

Code:

/*------------------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;}

tạo HTLM

Code:

$(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;
  });

 
});

lấy link HTLm chèn vào

Code:

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

...và đặt đoạn bên dưới thư viện jQuery.
Bước 3: Đặt id cho đoạn nội dung cần dùng lightbox

Code:

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

Nếu bạn dùng nhiều Popup thì phải dùng các id khác nhau.
Lưu ý không được thay đổi class="popup_block" .

Bước 4:Đặt liên kết để mở Popup

Code:

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

Số 500 là chiều rộng của Popup, đơn vị là px, có thể thay đổi cho phù hợp nội dung của bạn.
rel="popup_name" lấy theo id của đoạn nội dung bạn đặt ở bước 2. Ví dụ bước 2 bạn đặt id="chatbox" thì bước 3 phải ghi rel="chatbox" .
Lưu ý class="poplight" không được thay đổi.

Ghi chú:Nếu bạn dùng code này ngoài trang HTML thì phải lưu ý thứ tự sau: CSS - jQuery - Script -
Nguồn:BaiVong