How to create automatic pop-up using jQuery ?

Last Updated : 07 Jul, 2021

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:

HTML

<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              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=
 "https://code.jquery.com/jquery-3.2.1.slim.min.js"
                integrity=
 "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin="anonymous"></script>
 
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
 
        <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>
    </body>
</html>

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:

Javascript

<script>
// When document 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>

Complete Code:

Javascript

<!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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
              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=
"https://code.jquery.com/jquery-3.2.1.slim.min.js"
                integrity=
 "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
                crossorigin="anonymous"></script>
 
        <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
                crossorigin="anonymous"></script>
 
        <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"></script>
        <script>
            // When document 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>