Custom LightWindow with jQuery – from scratch
There are basically only a few things involved in the successful creation of a lightwindow:
1.) Make one DIV cover the whole page and another on top of this div that displays the information.
2.) Make the background div expand to cover the page when the window size changes and make the div containing the information stay centered in the middle of the page at the same time.
3.) Make the lightwindow disappear when a close button is pressed, this button is probably contained in the content div.
Let’s start out with #2, the window handling:
function GetWindowSize() {
var result = new Array(2);
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
result[0] = myWidth;
result[1] = myHeight;
return result;
}The above has been copied from somewhere (not by me) and the source is unknown to me. The function is very simple, simply return the size of the current page.
function setBackgroundsize() {
var windowsize = GetWindowSize();
jQuery("#infobackground").css({
"width": windowsize[0],
"height": windowsize[1],
"top": "0",
"left": "0",
"min-height": windowsize[1]
});
jQuery("#gameinfo").css({
"left": windowsize[0] / 2 - 500 / 2,
"top": windowsize[1] / 2 - 600 / 2
});
}So, the div with id infobackground is the “dimmer” if you will. The element responsible for making the rest of the page gray out. The element containing the info we want to show is of course gameinfo.
As you can see, making infobackground cover the whole page is trivial, making gameinfo stay in the middle is more complicated. Dividing the window size by two gives us the middle of the page, however since gameinfo has a width and height we need to accommodate that and that’s where the 500 and 600 numbers enter the picture above.
function closewindow() {
jQuery("#gameinfo").hide();
jQuery("#infobackground").hide();
}
function showGameInfo(gamecode, lang) {
setBackgroundsize();
jQuery("#infobackground").show(500, function() {
ajaxGetBoxHtml({game_name: gamecode}, lang, 'GameInfoBox', function(ret){
jQuery("#gameinfo-content").html(ret);
jQuery(".gamebox").removeClass("gamebox").addClass("gamebox-ajax");
jQuery(".gamebody").css("color", "#fff");
jQuery("#gameinfo").show(500);
});
});
}
jQuery(window).bind('resize', function() {
setBackgroundsize();
});ShowGameInfo above is the function that is called to “popup” the lightwindow. We begin by setting the size of infobackground with setBackgroundsize() and then we start showing stuff, beginning of course with infobackground.
AjaxGetBoxHtml() will get the information we want to display but that is another story which I won’t go into here, here we only conclude that the information returned will populate the innerHTML attribute of gameinfo-content, as sub-div of gameinfo.
The next two lines are specific to my own situation, it will exchange two classes to meet the requirement that when .gamebox is shown on its own page the background should be white and the text be black, but the lightwindow is black and should have white text.
Finally we show the gameinfo div, the lightwindow is now completely displayed and will behave properly when the window is resized due to the fact that we have bound setBackgroundsize() to the resize callback of the browser window.
The closewindow function does not require any explaining, it’s called when a small x-button is pressed in the top right corner of gameinfo.
Let’s move on to the CSS:
.gamebox, .gamebox-ajax{
background-color:#FFFFFF;
margin-bottom:10px;
overflow:hidden;
padding: 20px 20px 20px 20px;
text-align: left;
}
.gamebox-ajax{
background-color:#000;
color: #ffffff;
}
#infobackground {
background:url("/images/transparent_bg.png") repeat scroll 0 0 transparent;
position:fixed;
z-index:1950;
}
#gameinfo {
background:none no-repeat scroll center top #000000;
height:600px;
left:0;
padding:15px 0 0;
position:relative;
text-align:center;
top:0;
width:500px;
z-index:2000;
}
#gameinfo-content {
border:medium none;
height:580px;
width:460px;
position:relative;
z-index:2050;
}Note the fixed positioning of infobackground and the relative positioning of gameinfo. Note also the background of infobackground, the transparent_bg.png picture is simply a litttle gray square with opacity set to something like 50%.
I suppose the big take-away here is just how little actual JavaScript code you have to write to accomplish pretty neat stuff when you’re using libraries like jQuery.
Related Posts
Tags: css, Javascript, jquery, lightwindow