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


2 Comments

  • Anulador

    November 7, 2017

    I tried this but if click outside the popup, the popup window closes, Anyway to fix this?

    Reply
    • Mostafiz Shamim

      August 8, 2018

      This is not a problem, this is actually the function of this popup box. If you want a static popup, then you should try another one.

      Reply

Leave a Reply