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触发事件。如果您希望此弹出窗口自动打开，请使用 $（ '收藏夹'）。触发器（ “点击”）在document.ready函数中。这将自动调用该类点击，然后弹出的灯箱将会打开。

Lightbox就像一个弹出窗口

2 个答案: