How to Show Image Popup using Javascript and CSS in HTML Websites

Advertisement

If you’re building a HTML website, you can display popup windows to flash offers or breaking news. Most of the modern HTML websites don’t use the old method to display popup windows, because the browsers block them by default. So instead of showing popup windows, you can display popup within the web page by using Javascript and CSS in HTML sites.

The popup you display inside the web page can either be a image or text. If you use content management system like WordPress, there are lots of plugins to complete the task. For a basic HTML website, let us see how to do it. Let’s assume that you want to display some offer on the home page when the user loads the homepage / index.html.

1-13-2013 1-01-53 AM

First create the image that you want to display. For example: ad offers / brand related information etc. So, once the image is ready, open your index.html and paste the following codes before the </head> tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script type="text/javascript">
$(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(1000);
$('#mask').fadeTo("slow",0.8);

//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>

<style type="text/css">

body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:500px;
height:300px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:500px;
height:300px;
padding:0px 10px 10px 440px;
background:url(pop-back.png) no-repeat;
}
</style>
</head>

The above code, the first part is a javascript code to show the popup in a lightbox effect. Following it is the CSS code for it. In the final #boxes #dialog css code, change the width and height according to your image size. Also the “close it” text on the popup image – you can play with the padding numbers to fix it where ever you need them. Also the background:url (enter the url address of the image)

Now following code should be entered before the </body> tag in the index.html.

<div id="boxes">
<div style="top: 199.5px; right: 551.5px; display: none;" id="dialog" class="window">
<a href="#" class="close">Close it</a>
</div>
<!-- Mask to cover the whole screen -->
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
</body>

Finally save the index.html page and upload it. When ever the visitor lands on your home page, he will be shown the popup image in a lightbox effect.

For a limited time I'm sharing some select Tips and Tricks and How-To Guides for FREE.

Speak Your Mind

*