Sometime, we want to create an overlaying element thats covers the whole page with a semi transparent colour. This can prevent the user clicking on anything underneath this element.
To do this the element we shall use is a DIV element with style properties:
| position:fixed | positions the element relative to the window |
| z-index:1 | places the element above standard page elements but below any element on a higher z-index |
| background-color:#000 | for this example we shall make the overlay black |
| padding:0px | turn off any padding |
| margin:0px | turn off any margins so the black reaches the edges |
| top:0px | place the top of the element at top of the page |
| left:0px | place the left of the element at the left of the page |
| width:100% | set the width to the width of the page |
| height:100% | set the height to the height of the page |
We shall also give the element an ID of "blackBox".
Using the pasteRawHTML function, we can now place the element on the page:
pasteRawHTML('<div id="blackBox" style="position:fixed;z-index:1;background-color:#000;padding:0px;margin:0px;top:0px;left:0px;width:100%;height:100%" > </div>',document.body);
To set the transparency of the element, we can use the fader function, and call it regarding the "blackBox" element by:
fader(document.getElementById("blackBox"),20);
Now to fade to the element in, we need to start a repeating function, which is called by a timer, which is started by an initiating function. The function that would perform this should be:
var timer=null;
var currentOpacity=0;
var selectedObj=null;
var cycled=0;
var maxCycle=0;
var currentInterval=0;
var faderSteps=5;
var desiredDarkness=30;
var fadeInOutObj=null;
var fadeInOutOpacity=0;
function fadeUpTimer() {
obj=document.getElementById("blackBox");
currentOpacity+=faderSteps;
if (currentOpacity>desiredDarkness) {
currentOpacity=desiredDarkness;
}
fader(obj,currentOpacity);
if (currentOpacity==desiredDarkness) {
clearTimeout(timer);
} else {
timer = setTimeout("fadeUpTimer()",2);
}
}
function startFadeUp() {
currentOpacity=0;
if (document.getElementById("blackBox")==null) {
pasteRawHTML('<div id="blackBox" style="position:fixed;z-index:1;background-color:#000;padding:0px;margin:0px;top:0px;left:0px;width:100%;height:100%" > </div>',document.body);
}
obj=document.getElementById("blackBox");
fader(obj,0);
if (typeof timer != 'undefined') clearTimeout(timer);
timer = setTimeout("fadeUpTimer()",2);
}
function fadeDownTimer() {
obj=document.getElementById("blackBox");
currentOpacity-=faderSteps;
if (currentOpacity<0) {
currentOpacity=0;
}
fader(obj,currentOpacity);
if (currentOpacity==0) {
clearTimeout(timer);
removeTheNode("blackBox");
} else {
timer = setTimeout("fadeDownTimer()",2);
}
}
function startFadeDown(){
if (document.getElementById("blackBox")!=null) {
obj=document.getElementById("blackBox");
if (typeof timer != 'undefined') clearTimeout(timer);
timer = setTimeout("fadeDownTimer()",2);
}
}
So, when we wish to place a faded layer over the page we can call, "startFadeUp()", and when we have finished with it we can call, "startFadeDown()".
As this element overlays all elements on a lower z-index, these elements cannot now be clicked or interacted with.
Click here to see the example
Append HTML to the page