Popup image on page load

Popup image on page load

Popup image on page load: –In this blog, We will explain to you how you can show popup image on page load on any browser with a cancel button at the top.To Popup image on page load, you should have basic knowledge of HTML & CSS

HTML Code popup image on page load:-

Firs, create a folder with a popup and then create a new file inside popup folder, copy the following code in the open file and save it as an extension of a .html file.I have explained an essential part of the code with the help of mentioned comments in below code.

<html>

<head>

    <title>Popup image on page load</title>
 
    <style> 
  //put css code which i have mentioned below
    </style>
</head>
<body>
 <!-- div popup code starts from here -->
<div id="popup">

    <!-- and here comes the image -->
    <img src="Coming-Soon-Project-exatlas-e1429813652836.jpg" alt="popup">

        <!-- This button will close the popup on website-->
        <button id="close">Close button</button>

        <!--  we close the div popup code-->
        <!-- all things in this will show up within the popup so you can add more things not just an image -->
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
// write your javascript code here

</script>

</body>
</html>

CSS Code for Popup image on page load:-

This Stylesheet code copy from here paste on an HTML file by replacing following code

  //put css code which i have mentioned below
<style> 
    #popup {
            display:none;
            position:absolute;
            margin:0 auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
    }
    </style>

JavaScript Code:-

<script>
// below code line means when page loads on browser then run the following script
$(document).ready(function () {

    //select the POPUP DIV and show it
    $("#popup").hide().fadeIn(1000);

    //close the POPUP buuton  if the button with id="close" is clicked
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });

});
</script>

 

Full source code

<html>

<head>

    <title>Popup image </title>
 
    <style>


    #popup {
            display:none;
            position:absolute;
            margin:0 auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
    }
    </style>

     </head> <body>  <!-- div popup code starts from here --> 
<div id="popup">    
 <!-- and here comes the image -->  
   <img src="https://i1.wp.com/techieflair.com/wp-content/uploads/2017/05/popup.jpg" alt="popup">    
     <!-- This button will close the popup on website-->       
  <button id="close">Close button</button>        
 <!--  we close the div popup code-->        
 <!-- all things in this will show up within the popup so you can add more 
things not just an image --> </div>

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script>

// below code line means when page loads on browser then run the following script
$(document).ready(function () {

    //select the POPUP DIV and show it
    $("#popup").hide().fadeIn(1000);

    //close the POPUP buuton  if the button with id="close" is clicked
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });

});
</script>

    
</body> </html>

Snapshot

Popup image on page load
Popup image on page load

I hope you would like this post and if you have any problem/suggestion/feedback then please give us by commenting below

Leave a Comment