How to delay background to show after the popup appear and disappear

Question

I want the popup to show once the page is load. I have made the popup everything working fine I but there is one issue page shows just for a split second before the popup. I want the popup to load first without showing the page.

This is the link of the page http://test2429d.vinnugrunnur.is/home popup has video which runs for 7 second and disappear.

Answer 1

Looking at your sample site , you will have to hide the content and unhide it when you hide the popup.

The reason being your popup is dynamically being added using Javascript. So the popup won't get shown until the page is completely loaded.

There are several ways to do this. If this popup is only limited to this page, you can perhaps use the body class as a reference to hide your .jupiterx-site .

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

And your Javascript should unhide it after 7 seconds

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