如何在弹出窗口显示和消失后延迟显示背景

Question

我希望一旦页面加载就显示弹出窗口。 我已经让弹出窗口的一切工作正常但是有一个问题页面在弹出窗口之前只显示了一瞬间。 我希望首先加载弹出窗口而不显示页面。

这是页面链接http://test2429d.vinnugrunnur.is/home popup有视频，运行7秒钟后消失。

Answer 1

查看您的示例站点 ，您必须隐藏内容并在隐藏弹出窗口时取消隐藏它。

弹出窗口的原因是使用Javascript动态添加。 因此，在页面完全加载之前，弹出窗口不会显示。

有几种方法可以做到这一点。 如果此弹出窗口仅限于此页面，您可以使用body类作为引用来隐藏.jupiterx-site 。

body.elementor-page-10 .jupiterx-site {
    display: none;
}

你的Javascript应该在7秒后取消隐藏它

jQuery(document).ready(function(){
      // setTimeout() function will be fired after page is loaded
      // it will wait for 5 sec. and then will fire
      // $("#successMessage").hide() function
  setTimeout(function() {
    jQuery('.eael-lightbox-popup-window').fadeOut('slow');
    jQuery('.jupiterx-site').show();
  }, 7000); 
});