Show an Image PopUp after Page Load using HTML CSS and jQuery

It is quite common, whenever you visit any website. What you will see is the Preloader right, then the website page loaded. But then have you notice after few seconds a popup image or card appears at the center. On the card mostly you will see one thing in common that is subscribed for our newsletter. Also, there is always two buttons one is for the Subscribe and another one is to Cancel.

But before going to that check my website video tutorial. This one is just an awesome Dark theme.

I know if you are a programmer then you must think how to code for this. So here I am. I made a video on Youtube on How to Show an Image PopUp after Page Load using HTML CSS and jQuery. Below is the video.

Image popUp

I will tell you the simple funda on how to Show an Image PopUp after Page Load using HTML CSS and jQuery.

First, of all our aim is to show the newsletter at the center of the webpage. So our code should be for How to center the div on the website.

Second, We want to code form and other things inside the div so we will do simply using HTML and CSS. Done

Now, at starting what we want is to hide the div and only show that div after the few seconds when done with page load. We can accomplish by simply using Display property of CSS.

Now the main part where we want to Show an Image PopUp after Page Load using HTML CSS and jQuery. We will use setTimeout and Jquery property to get this.

jQuery part is here only



var preloader = document.getElementById("loading");
  function myFunction(){
   preloader.style.display = 'none';
 };

$(document).ready(function(){
 setTimeout(function(){
  $('#popUpMain').css('display','block'); }, 5000);
});

$('.submitId').click(function(){
 $('#popUpMain').css('display','none');
});

</script>

Below is the source code.