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

17 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
  6. thank you https://bankingzone.in

    ReplyDelete
  7. There are various agencies which deals with evidences located at a crime scene. Police use it for investigation, prosecuting attorney presents it before court of law as well as a forensic science technician analyzes evidences thoroughly to help other agencies in criminal procedure. A forensic science technician conducts comprehensive chemical and physical study of evidence submitted by a law enforcement agency new york website design company

    ReplyDelete
  8. Hey! I simply wish to give an enormous thumbs up for the good information you’ve got here on this post. I will likely be coming back to your blog for more soon. website designer nyc

    ReplyDelete
  9. light bulbs are good for lighting the home but stay away from incandescent lamps because they generate so much heat;; branding sf

    ReplyDelete
  10. nice work , Really Appreciated

    ReplyDelete