Popup div on page load

Popup div on page load:- Hi Readers! In this blog, I will explain to you how you can show popup div on page load with the cancel button.

HTML Code Popup div on page load:

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

<html>
<head>
    <title>Popup div 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:-

This Stylesheet code copy from here paste to the 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:-

This script code copy from here pastes on the HTML file by replacing following code.

In this JavaScript File, we use the $(document). ready( function() signals that the DOM (Document Object Model) of the page is now ready. Here to Popup Div or to show div on page load we use the jquery hide() and fadeIn() function. Jquery Hide() function just hide the element and Jquery fadeIn() function generally changes the opacity of the selected elements, from hidden to visible (fading effect). Here one parameter is used in fadeIn() function which is speed [optional] i.e., 1000 miliseconds is the duration of effect of fade In.

// write your javascript code here
<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>

Final Output:-

Popup div on page load

Leave a Comment