How to create automatic pop-up using jQuery ?

In this article, we will be showing you how to make a custom automatic Pop-up box for subscribing to any service. You might have often come across a Pop-up box asking to subscribe to any services when you visit any particular site. Hence in this article, you will learn how to customize that Pop-up box and make your own. We will be using simple HTML, CSS, Bootstrap, and jQuery code to demonstrate the procedure.

Explanation:

First of all, we need to create an index.html file and paste the below code of index.html file into that. This index.html file includes the app.js file at the bottom of the body tag. Now in the app.js File write jQuery ready function which runs only when the document is ready. After that, there is setTimeout() function which runs after 3 seconds, and in that setTimeout() function, we will make the display of the popup box as ‘block’ so that it is visible after 3 seconds. Then we have applied click event on two buttons after as soon anyone clicks on it, the display of the pop-up box becomes ‘none’.

HTML code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,
      initial-scale=1, shrink-to-fit=no"
        />
  
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
              href=
              integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous" />
  
        <title>Automatic Pop-Up
      </title>
    </head>
  
    <body>
        <h1 class=
"text-center text-white mt-5 font-weight-bold">
            Automatic Pop-Up using jQuery
        </h1>
        <br />
        <br />
        <div class="POPmain" 
             style="display: none;">
            <div id="popup">
                <input type="email" 
                       class=
                  "text-center w-50 form-control mt-5" 
                       id="emailId" 
                       placeholder="type your email here..." />
  
                <button class=
"submitId btn btn-primary font-weight-bold mt-5">
                    Subscribe
                </button>
                <button class=
"submitId btn btn-primary text-center font-weight-bold mt-5">
                    No, Thanks
                </button>
            </div>
        </div>
  
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src=
                integrity=
 "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
                crossorigin="anonymous"></script>
  
        <script src=
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
  
        <script src=
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>
    </body>
</html>

chevron_right


CSS code:



body{
  height: 200vh;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 111;
 }
#popup{
  width: 550px;
  height: 250px;
  background-image: 
   url(https://images-na.ssl-images-amazon.com/
     images/I/31Xl85rQxbL._SY355_.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 2px 2px 5px 3px white;
 }
#emailId{
  text-align: center;
  position: absolute;
  left: 25%;
  top: 25%;
 }
.submitId {
  position: relative;
  top: 130px;
  left: 180px; 
 }

JavaScript: 

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
// When doument is ready
$(document).ready(function(){
// SetTimeout function 
 // Will execute the function 
  // after 3 sec
setTimeout(function(){
  $('.POPmain').css(
    'display', 'block');
}, 3000)
});
$('.submitId').click(
  function(){
  $('.POPmain').css(
    'display', 'none');
});
</script>

chevron_right


Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,
      initial-scale=1, shrink-to-fit=no"
        />
  
        <!-- Bootstrap CSS -->
        <link rel="stylesheet"
              href=
              integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
              crossorigin="anonymous" />
  
        <title>Automatic Pop-Up</title>
        <style>
            body {
                height: 200vh;
                width: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 111;
            }
            #popup {
                width: 550px;
                height: 250px;
                background-image: url(
https://images-na.ssl-images-amazon.com/images/I/31Xl85rQxbL._SY355_.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 2px 2px 5px 3px white;
            }
            #emailId {
                text-align: center;
                position: absolute;
                left: 25%;
                top: 25%;
            }
            .submitId {
                position: relative;
                top: 130px;
                left: 180px;
            }
        </style>
    </head>
  
    <body>
        <h1 class=
"text-center text-white mt-5 font-weight-bold">
            Automatic Pop-Up using jQuery
        </h1>
        <br />
        <br />
        <div class="POPmain"
             style="display: none;">
            <div id="popup">
                <input type="email" 
                       class=
        "text-center w-50 form-control mt-5" 
                       id="emailId" 
                       placeholder=
        "type your email here..." />
  
                <button class=
 "submitId btn btn-primary font-weight-bold mt-5">
                    Subscribe
                </button>
                <button class=
"submitId btn btn-primary text-center font-weight-bold mt-5">
                    No,Thanks
                </button>
            </div>
        </div>
  
        <!-- Optional JavaScript -->
        <!-- jQuery first,then Popper.js,then Bootstrap JS -->
        <script src=
                integrity=
 "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin="anonymous"></script>
  
        <script src=
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
  
        <script src=
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
                crossorigin="anonymous"></script>
        <script>
            // When doument is ready
            $(document).ready(function () {
                // SetTimeout function
                // Will execute the function
                // after 3 sec
                setTimeout(function () {
                    $(".POPmain").css("display", "block");
                }, 3000);
            });
            $(".submitId").click(function () {
                $(".POPmain").css("display", "none");
            });
        </script>
    </body>
</html>

chevron_right


Output: When you will open index.html  file in your browser then you will see the following result after 3 seconds.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.