How to add an Automatic Popup box by HTML, Css & jQuery

This is the easiest way I know to make a automatic popup box in a website by html css and jquery which will appear when user will load the website. And it will appear how many time user reload the particular page.

Now let’s start. Firstly you make sure that you called the core jquery file of main jquery file. If not, then add the file in your html file

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

After adding the jquery file add the following direction,

Add HTML codes in your html file like below,

<div id="boxes">
<div id="dialog" class="window">
Your Content Here
<div id="popupfoot"> <a href="#" class="close agree">I agree</a> | <a class="agree"style="color:red;"        href="#">I  do not agree</a> </div>
</div>
<div id="mask"></div>
</div>

Now add css styles as you want. for my need I added this,

#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 {
width: 750px;
height: 300px;
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: 250px;
}

Then add the jQuery codes in a new script file or in your html file into script tag.

$(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();
});

});

Now enjoy an Awesome popup box in your website.

Keep learning