像弹出窗口一样的灯箱

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

Answer 2

您可以使用 Jquery 触发事件。如果您希望此弹出窗口自动打开，请使用 $('.lightbox').触发器("click") 在 document.ready 函数中。这将自动调用 class 单击，然后您的灯箱弹出窗口将打开。

像弹出窗口一样的灯箱

Lightbox like a popup

javascript

jquery

popup

autoplay