Javascript popup on page load

Javascript popup on page load is a simple script.Popup in javascript for open popup message when window open. Make your own popup window in just a few minutes. I give you a just platform of popup javascript that open when page load.You can change your content inside may be message box, facebooks like a box, twitter tweets, ads, or any kind of picture.

Google javascript insert in header of page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>

popup inner div

<div id="boxes">
  <div id="dialog" class="window">
  <h3 align="center">Tools suggestion box</h3>
    <form name="ajax-form" id="ajax-form" action="mail-it.php" method="post">
                    <input name="name" id="name" type="text" placeholder="Full Name" /></br>
                    <input name="email" id="email" type="text" placeholder="E-mail" /></br>
                    <input name="contact"  type="text" placeholder="Contact No." /></br>
                    <textarea name="comment" id="message" placeholder="About tool"></textarea></br>
                    <input class="send_message" id="send" value="Submit" type="button">
    </form>
    <div id="popupfoot"> <a href="#" class="close agree">Close</a> | <a class="agree"style="color:red;" href="#">Reset</a> </div>
  </div>
  <div id="mask"></div>
</div>

Place this code anywhere in your page and automatically open when page load.

File you have to make for this popup must have both of above content and most important javascript given below.

Popup Javascript

<script>
$(document).ready(function() {  
 
var id = '#dialog';
     
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
     
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
 
//transition effect
$('#mask').fadeIn(500); 
$('#mask').fadeTo("slow",0.9);  
     
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
               
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
     
//transition effect
$(id).fadeIn(2000);     
     
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
 
$('#mask').hide();
$('.window').hide();
});
 
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
     
});
</script>

If you want to open popup when clicking on the button then you just make a function and start the script with that button and you can easily use this on click popup, as i use in Liveurlifehere Tools suggestion button.

CSS for popup window

You can make any of CSS and place in your style file, but link that in this popup div.I have CSS for that, you can use this directly in your demo.

#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}
 
#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}
 
#boxes #dialog {
margin-top:-300px;
  width: 450px;
  height: 500px;
  padding: 10px;
  background-color: #ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}
 
#popupfoot {
  font-size: 16pt;
  position: absolute;
  bottom: 0px;
  width: 250px;
  left: 120px;
}

I hope you can make this yourself if you need more help write in the comment box below.