Hiện nay nếu muốn dùng hiệu ứng lightbox khi muốn làm nổi bật một nội dung nào đó, ta có các plugin hỗ trợ như:
Để sử dụng các plugin trên, bạn cần phải tải các thư viện script hỗ trợ để có thể sử dụng. Hôm nay mình sẽ chia sẽ với bạn cách dùng lightbox mà ko cần đến các thư viện hỗ trợ khác, chỉ cần dùng vốn có sẵn của forum là jQuery 1.3.2 Nguồn: [You must be registered and logged in to see this link.] |
Hướng dẫn:
Bước 1: 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;}
Bước 2:Tạo một trang HTML với nội dung:
- 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 trang HTML vừa tạo ở trên thay vào code:
- 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 3. Ví dụ bước 3 bạn đặt id="chatbox" thì bước 4 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 - DOM
