Change background image
T o w o r l d

Go downThông điệp [Trang 1 trong tổng số 1 trang]

© FMvi.vn

on Wed Sep 12, 2012 5:10 pm
avatar
avatar

Level 100

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:

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

Viết bởi baivong - [You must be registered and logged in to see this link.]
Xem lý lịch thành viên http://toworld.forum-viet.comps_masrie_mg_masrie@yahoo.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà Rim
Trả lời nhanh

Về Đầu TrangThông điệp [Trang 1 trong tổng số 1 trang]

  © FMvi.vn

« Xem bài trước | Xem bài kế tiếp »

Bài viết liên quan

    Quyền hạn của bạn:

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