You are not connected. Please login or register

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

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

SuperMan

avatar
»Admin
»Admin
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




Giận Giận Giận Giận Thư Giận Ngủ Nhe Răng Cười Say Tò Mò Đáng Yêu Ngầu Ngầu Ngầu   Đáng Yêu
Xem lý lịch thành viên

sican73

avatar
Thành Viên Bạc
Thành Viên Bạc
thank's

Xem lý lịch thành viên

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết