Wed Sep 12, 2012 5:10 pm
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ư:
colorbox
jQueryUI Dialog
fancybox
DOM window
shadowbox.js
thickbox
Để 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.]
Bước 1: Thêm vào CSS:
Bước 3: Đặt id cho đoạn nội dung cần dùng lightbox
Lưu ý không được thay đổi class="popup_block" .
Bước 4:Đặt liên kết để mở Popup
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
Viết bởi baivong - [You must be registered and logged in to see this link.]
colorbox
jQueryUI Dialog
fancybox
DOM window
shadowbox.js
thickbox
Để 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.]
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;}
- 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;
});
});
- Code:
<script src="LINK TRANG HTML" type="text/javascript"></script>
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>
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
Viết bởi baivong - [You must be registered and logged in to see this link.]