[Bài 7 jquery]: Tạo lightbox bằng jquery

5/5 - (2 bình chọn)

Trong bài trước bạn đã làm việc với jquery để tạo ra một slider đơn giản. Trong bài hôm nay mình sẽ hướng dẫn bạn làm một bài tập khác đó là tạo lightbox bằng jquery. Lightbox cũng gần giống như modal là tính năng hiển thị khung nội dung lên phía trên.

Tạo lightbox bằng jquery

Yêu cầu:

Tạo nút nhấn mà khi nhấn sẽ hiện ra một khung lightbox với nội dung bên trong và có nút tắt để ẩn lightbox đi.

Phân tích:

Đầu tiên, bạn cần xác định sự kiện click chuột vào nút nhấn. Sau đó sẽ hiện nội dung lighbox ra. Cần chỉnh css cho lightbox cũng như xác định vị trí xuất hiện.

Code:

var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');

var positionLightbox = function() {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 148,
        lbContent = $('#lb-content');

    lbContent.css({
        'left' : lbContentMargin,
        'top' : $(window).scrollTop() + 50 + 'px'
    });
};

$('#search-submit').click(function() {
    lightBox.fadeIn(function() {
        lightBoxContent.show();                               
    });
    positionLightbox();
});

$('#lb-close').click(function() {
    lightBox.hide();
    lightBoxContent.hide();
});

Giải thích:

Đặt lightBox, lightBoxContent và khai báo các thuộc tính vị trí, css cho việc hiển thị ra màn hình.

Khi click bào nút nhấn thì lightBox.fadeIn() xuất hiện  lightbox với nội dung bên trong lightBoxContent.show().

Khi click để tắt lightbox lightBox.hide() thì lightBoxContent.hide() ẩn nội dung bên trong.

Kết luận:

Như vậy, sau khi hoàn thành bài tập tạo lightbox bằng jquery thì mình cũng sẽ kết thúc series bài tập jquery tại đây. Sau khi hoàn thành series này thì mình tin chắc bạn sẽ cũng cố kiến thức của mình hơn và có thể giải quyết những vấn đề liên quan đến jquery một cách dễ dàng. Trong thực tế thì các tính năng lớn liên quan đến jquery thường bạn sẽ sử dụng đến các jquery plugin. Vì thế tiếp theo mình sẽ viết bài hướng dẫn một số jquery plugin thường dùng mà các bạn có thể gặp phải trong thực tế. Cảm ơn các bạn đã theo dõi series bài tập jquery này và hẹn gặp lại các bạn ở những bài viết khác.

Từ khóa tìm kiếm:

  • lam sao de thuc hanh jquery

Add Comment