javascript - 像弹出窗口一样的灯箱

Question

这段代码是一个灯箱，但是需要点击才能显示内容，而我需要它在不点击的情况下出现。自动的。有点像弹出窗口。

$(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');
    });;
  });
});

Answer 1

这个怎么样？将代码移至函数中，然后在文档准备好时运行打开的弹出函数:

$(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');
    });
}