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


16 Comments

  • 三公百家樂

    January 16, 2017

    This is very interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your fantastic post. Also, I have shared your site in my social networks!

    Reply
  • read this

    February 8, 2017

    I simply want to say I’m very new to blogging and honestly enjoyed you’re blog site. More than likely I’m planning to bookmark your blog post . You really come with great well written articles. Thanks for sharing your website.

    Reply
  • lovely shez

    March 5, 2017

    This is a great tip especially to those new to the blogosphere. Simple but very precise information Thank you for sharing this one. A must read article!

    Reply
  • There are certainly a number of particulars like that to take into consideration. That is a great level to convey up. I supply the ideas above as normal inspiration but clearly there are questions like the one you deliver up where an important thing will likely be working in honest good faith. I don?t know if finest practices have emerged around issues like that, however I am sure that your job is clearly identified as a fair game. Both boys and girls really feel the affect of only a second’s pleasure, for the rest of their lives. Miss Verlene

    Reply
  • corburterilio

    March 11, 2017

    What i don’t realize is if truth be told how you are no longer really a lot more smartly-appreciated than you may be now. You are very intelligent. You already know thus significantly relating to this subject, made me in my opinion consider it from numerous various angles. Its like men and women aren’t involved except it’s one thing to do with Girl gaga! Your own stuffs nice. At all times deal with it up!

    Reply
  • visit this web page link

    March 12, 2017

    I will right away seize your rss feed as I can’t find your email subscription link or e-newsletter service. Do you have any? Kindly allow me know in order that I may just subscribe. Thanks.|

    Reply
  • Drywall Repair

    March 12, 2017

    Usually I don’t learn article on blogs, but I wish to say that this write-up very compelled me to take a look at and do so! Your writing taste has been surprised me. Thanks, very nice post.

    Reply
  • Health And Fitness

    March 12, 2017

    I truly appreciate this post. I have been looking all over for this! Thank goodness I found it on Bing. You have made my day! Thx again!

    Reply
  • Home Improvement

    March 20, 2017

    I want to express my gratitude for your generosity supporting persons who have the need for help on this niche. Your special dedication to passing the solution all over became exceptionally beneficial and has usually enabled workers just like me to reach their targets. Your personal warm and friendly help indicates much a person like me and extremely more to my colleagues. Thanks a lot; from everyone of us.

    Reply
  • Health & Fitness

    March 21, 2017

    I am very happy to read this. This is the kind of manual that needs to be given and not the random misinformation that is at the other blogs. Appreciate your sharing this greatest doc.

    Reply
  • Business

    March 21, 2017

    I was suggested this blog by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You’re wonderful! Thanks!

    Reply
  • Health & Fitness

    March 21, 2017

    You could definitely see your enthusiasm within the paintings you write. The sector hopes for even more passionate writers like you who aren’t afraid to mention how they believe. All the time go after your heart.

    Reply
  • Health & Fitness

    March 21, 2017

    Thanks for another informative website. The place else could I am getting that kind of information written in such a perfect method? I have a venture that I am simply now running on, and I’ve been on the look out for such information.

    Reply
  • Law & Legal

    March 21, 2017

    Excellent post. I was checking constantly this blog and I am impressed! Very useful information specially the last part 🙂 I care for such info a lot. I was seeking this particular info for a very long time. Thank you and good luck.

    Reply
  • Law & Legal

    March 21, 2017

    you are actually a excellent webmaster. The website loading pace is incredible. It sort of feels that you are doing any distinctive trick. Furthermore, The contents are masterwork. you’ve done a great process on this matter!

    Reply
  • Travel & Hotel

    March 21, 2017

    Definitely, what a great site and illuminating posts, I surely will bookmark your website.Have an awsome day!

    Reply

Leave a Reply