THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

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

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.

Google Font: Click here to get the font.

Free Images: Check here to get Free Images

SOURCE CODE

10 comments:

  1. great dude... its really amazing website... can you please tell me one thing... how can i make this comment box...with auto selected email
    please must reply or text me on my whatsapp number
    plz.'
    +92 317 4840 816

    ReplyDelete
  2. really u doing great work for student

    ReplyDelete
    Replies
    1. thanks bro :) plz share my videos with ur friends too :)

      Delete
  3. Sir. .How to hide textbox but written prosion show

    ReplyDelete
  4. Thanks for helping us :)
    your all videos are awesome :)

    ReplyDelete
  5. thanks much..can we deploy php websites for free as well?if yes,please make one video

    ReplyDelete