CODEWITHSUNDEEP
javascriptjquerypopupautoplay
Anderson
Anderson

Reputation: 363

Lightbox like a popup

This code is a lightbox, but it's necessary click to show the content, and I need it appearing without click. Automatic. Kind a pop up. 

$(document).ready(function() {
  $('.lightbox').click(function() {
    $('.background, .box').animate({
      'opacity': '.60'
    }, 500, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 500, 'linear');
    $('.background, .box').css('display', 'block');
  });

  $('.close').click(function() {
    $('.background, .box').animate({
      'opacity': '0'
    }, 500, 'linear', function() {
      $('.background, .box').css('display', 'none');
    });;
  });

  $('.background').click(function() {
    $('.background, .box').animate({
      'opacity': '0'
    }, 500, 'linear', function() {
      $('.background, .box').css('display', 'none');
    });;
  });
});

Upvotes: 0

Views: 146

Answers (2)

Vijay
Vijay

Reputation: 51

You can trigger an event using Jquery. If you want this pop up to open automatically then use $('.lightbox').trigger("click") in document.ready function. This will automatically call that class click and by this your light box pop up will open.

Upvotes: 1

Pete
Pete

Reputation: 58432

How's this? Move code into functions and then just run open popup function on document ready:

$(document).ready(function() {
  $('.lightbox').click(function() {
    openPopup();
  });

  $('.close').click(function() {
    closePopup();
  });

  $('.background').click(function() {
    closePopup();
  });

   openPopup();
});


function openPopup() {
    $('.background, .box').animate({
      'opacity': '.60'
    }, 500, 'linear');
    $('.box').animate({
      'opacity': '1.00'
    }, 500, 'linear');
    $('.background, .box').css('display', 'block');
}

function closePopup() {
    $('.background, .box').animate({
      'opacity': '0'
    }, 500, 'linear', function() {
      $('.background, .box').css('display', 'none');
    });
}

Upvotes: 2

Related Questions