How to display a popup once using JavaScript

Hi guys , today we learn how to display popup once when website load. Popup will show when visitor come until he/she not accept or cancel. display a popup once is best to increase leads or help the customer to enquiry your product or service.

By a javascript function will call and prevent a popup to not show again until he/she do not reload the website.

HTML for display popup
Once

<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>

        <form method="POST" action="">

          <div class="form-group">
            <h1 class="v_inline_block">For Enquiry(Comment Below)</h1>
            <h3 class="v_enquiry_mob">Developers Guidance</h3>
          </div>

            <div class="form-group">
                <label for="exampleFormControlInput1">Name</label>
                <input type="text" class="form-control" name="" id="" placeholder="Your Name">
            </div>

            <div class="form-group">
                <label for="exampleFormControlInput1">Mobile Number</label>
                <input type="text" class="form-control" name="" id="" placeholder="Mobile Number">
            </div>

            <div class="form-group">
                <label for="exampleFormControlSelect1">Select Courses</label>
                <select class="form-control" id="exampleFormControlSelect1">
                    <option value="">Select Courses</option>
                    <option value="2">BCA</option>
                    <option value="3">B.tech</option>
                    <option value="4">others</option>

                </select>
            </div>


            <div class="form-group">
                <label for="exampleFormControlInput1">Mobile Number</label>
                <textarea type="text" class="form-control" rows="4" cols="50" name="" id="" placeholder="Message"> </textarea>
            </div>

            <div class="">
                <button type="button" class="btn btn-primary btn-lg center-block">Submit</button>
            </div>

        </form>
    </div>

</div>

<h1 class="v_inline_block">For Enquiry(Comment Below)</h1>

<h3 class="v_enquiry_mob">Developers Guidance</h3>

</div>

</div>

<label for="exampleFormControlInput1">Mobile Number</label>

</div>

<label for="exampleFormControlSelect1">Select Courses</label>

<option value="">Select Courses</option>

<option value="4">others</option>

</select>

</div>

<label for="exampleFormControlInput1">Mobile Number</label>

</div>

<button type="button" class="btn btn-primary btn-lg center-block">Submit</button>

</div>

</form>

</div>

The Above HTML code help to show the popup which contains the attribute like Name, Mobile Number, A select option and Textarea. You can show the Email Subscription, Newsletter or you can use as a lead for your website.

Style.css

CSS

body {font-family: Arial, Helvetica, sans-serif;}
#pro_query input, textarea {
    width: 100%;
    border: 1px solid #ccc;
    padding: 7px 15px;
}



/* The Modal (background) */

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.input-text, input[type=text], input[type=password], input[type=email], select {
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    height: 45px;
    margin-bottom: 10px;
    border: 1px solid #e1e1e1;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    background-color: transparent;
}
textarea.form-control {
    height: auto;
}
.form-group {
    margin-bottom: 15px;
}
.form-control {
    background-color: #fff;
    margin-bottom: 25px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    height: 45px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 37px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 33px;
  border: 1px solid #888;
  width: 40%;
}

/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-top: -22px;
   
    right: 6px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.guidance{
display: inline-block;
float: right;
font-family: sans-serif;
}

.developers_inline_block{
  display: inline-block;
}

body {font-family: Arial, Helvetica, sans-serif;}

#pro_query input, textarea {

width: 100%;

border: 1px solid #ccc;

padding: 7px 15px;

}

/* The Modal (background) */

label {

display: inline-block;

max-width: 100%;

margin-bottom: 5px;

font-weight: 700;

}

.input-text, input[type=text], input[type=password], input[type=email], select {

width: 100%;

padding: 6px 12px;

font-size: 14px;

line-height: 1.42857143;

color: #555;

height: 45px;

margin-bottom: 10px;

border: 1px solid #e1e1e1;

-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0);

box-shadow: inset 0 1px 1px rgba(0,0,0,0);

-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;

-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

background-color: transparent;

}

textarea.form-control {

height: auto;

}

.form-group {

margin-bottom: 15px;

}

.form-control {

background-color: #fff;

margin-bottom: 25px;

border-radius: 0;

-webkit-border-radius: 0;

-moz-border-radius: 0;

-o-border-radius: 0;

height: 45px;

}

.modal {

display: none; /* Hidden by default */

position: fixed; /* Stay in place */

z-index: 10; /* Sit on top */

padding-top: 37px; /* Location of the box */

left: 0;

top: 0;

width: 100%; /* Full width */

height: 100%; /* Full height */

overflow: auto; /* Enable scroll if needed */

background-color: rgb(0,0,0); /* Fallback color */

background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: auto;

padding: 33px;

border: 1px solid #888;

width: 40%;

}

/* The Close Button */

.close {

color: #000;

float: right;

font-size: 28px;

font-weight: bold;

margin-top: -22px;

right: 6px;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

cursor: pointer;

}

.guidance{

display: inline-block;

float: right;

font-family: sans-serif;

}

.developers_inline_block{

display: inline-block;

}

Javascript Code:

JavaScript

// Get the modal
var modal = document.getElementById("myModal");

var span = document.getElementsByClassName("close")[0];

window.onload = function() {
  setTimeout(function(){ modal.style.display = "block"; }, 3000);
};

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

// Get the modal

var modal = document.getElementById("myModal");

var span = document.getElementsByClassName("close")[0];

window.onload = function() {

setTimeout(function(){ modal.style.display = "block"; }, 3000);

};

// When the user clicks on <span> (x), close the modal

span.onclick = function() {

modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

When the user clicks on (x), close the modal and When the user clicks anywhere outside of the modal, close it.The above javascript show the the modal once when website load.

Conclusion : Popup show once in the website using JavaScript. Full source code is provided by Developerguidance