像弹出窗口一样的灯箱答案

【问题标题】：Lightbox like a popup像弹出窗口一样的灯箱
【发布时间】：2016-07-19 12:32:20
【问题描述】：

此代码是一个灯箱，但必须点击才能显示内容，我需要它在不点击的情况下出现。自动的。弹出一个。

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

【问题讨论】：

标签： javascript jquery popup autoplay

【解决方案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');
    });
}

【讨论】：

【解决方案2】：

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

【讨论】：