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
三公百家樂
January 16, 2017This 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!
read this
February 8, 2017I 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.
lovely shez
March 5, 2017This 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!
John Deere Service Manuals
March 11, 2017There 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
corburterilio
March 11, 2017What 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!
visit this web page link
March 12, 2017I 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.|
Drywall Repair
March 12, 2017Usually 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.
Health And Fitness
March 12, 2017I 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!
Home Improvement
March 20, 2017I 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.
Health & Fitness
March 21, 2017I 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.
Business
March 21, 2017I 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!
Health & Fitness
March 21, 2017You 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.
Health & Fitness
March 21, 2017Thanks 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.
Law & Legal
March 21, 2017Excellent 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.
Law & Legal
March 21, 2017you 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!
Travel & Hotel
March 21, 2017Definitely, what a great site and illuminating posts, I surely will bookmark your website.Have an awsome day!
Anulador
November 7, 2017I tried this but if click outside the popup, the popup window closes, Anyway to fix this?