How to create automatic pop-up using jQuery ? - GeeksforGeeks

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 secsetTimeout(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>
Output: When you will open index.html  file in your browser then you will see the following result after 3 seconds.
varshagumber28
jQuery-Misc
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to get the ID of the clicked button using JavaScript / jQuery ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?