When i surf the net and saw all these fantastic feature where the screen went black-out when a user click certain link or button always makes me wonder how does it actually work? But i always do not have the time and knowledge to understand these things since my css knowledge has always been at the basic stage where understanding of it is just too little for me due to the working time that always occupate me. Recently, i have quit my job and went back to school which leaves me with a lot of space time. This has given me the chance to pump up my knowledge on css which i'm always weak in since the starting of my web programming. i would like to show my appreciation to the author of Hunlock who produce a great tutorial on this topic.
if you have a chance to visit Hunlock tutorial, you will see the above code that he wrote for this method to work. The technique to make the screen black-out is entirely depending on the CSS. What the above code does is to create a div tag just after the body tag which already have all the css rule appended into this particular div tag. But it is being hidden until a trigger occurs and turn the flag to true to display it out.
Originally, the background color of this particular div tag should be black entirely. However, with the introduction of alpha and opacity, it gives the background a feel of transparency. While the div is treated as a block level when its triggered and position at the top left hand side with the height and width being defined in the javascript, the whole screen will be occupant by the effect. The z-index will lift the div tag by z-axis (upwards) and anything below it will be covered by the black-out effect and whenever user tries to click anything below it, it will be disabled due to z-index and display:block.
function grayOut(vis, options, extra) {
// Pass true to gray out screen, false to ungray
// options are optional. This is a JSON object with the following (optional) properties
// opacity:0-100 // Lower number = less grayout higher = more of a blackout
// zindex: # // HTML elements with a higher zindex appear on top of the gray out
// bgcolor: (#xxxxxx) // Standard RGB Hex color code
// grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order. Pass only the properties you need to set.
var options = options || {};
var zindex = options.zindex || 50;
var opacity = options.opacity || 70;
var opaque = (opacity / 100);
var bgcolor = options.bgcolor || '#000000';
var dark=document.getElementById('darkenScreenObject');
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
// If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div'); // Create the layer.
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to avoid making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
var msgnode = document.createElement('div'); // Create the box layer.
msgnode.style.position='fixed'; // Position fixed
msgnode.style.display='none'; // Start out Hidden
msgnode.id='box'; // Name it so we can find it later
// give it a size and align it to center
msgnode.style.width = "300px";
msgnode.style.height = "300px";
msgnode.style.marginLeft= "-150px";
msgnode.style.marginTop= "-150px";
msgnode.style.textAlign = 'center';
msgnode.style.top= "50%"; // In the top
msgnode.style.left="50%"; // Left corner of the page
tbody.appendChild(msgnode); // Add it to the grey screen
tbody.appendChild(tnode); // Add it to the web page
dark=document.getElementById('darkenScreenObject'); // Get the object.
}
if (vis) {
// Calculate the page width and height
if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
var pageWidth = document.body.scrollWidth+'px';
var pageHeight = document.body.scrollHeight+'px';
} else if( document.body.offsetWidth ) {
var pageWidth = document.body.offsetWidth+'px';
var pageHeight = document.body.offsetHeight+'px';
} else {
var pageWidth='100%';
var pageHeight='100%';
}
//set the shader to cover the entire page and make it visible.
dark.style.opacity=opaque;
dark.style.MozOpacity=opaque;
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= pageWidth;
dark.style.height= pageHeight;
dark.style.display='block';
if(extra == 'Y')
document.body.style.overflow = 'hidden';
document.getElementById("box").style.zIndex = zindex+10;
document.getElementById("box").style.border = "#000 solid 1px";
document.getElementById("box").style.display = "block";
document.getElementById("box").onclick = function() //attach a event handler to hide both div
{
dark.style.display="none";
document.getElementById("box").style.display = "none";
document.body.style.overflow = 'auto';
}
document.getElementById("box").style.backgroundColor="#FFF";
document.getElementById("box").innerHTML = "This is a box. Click me to exit effect.";
} else {
dark.style.display='none';
}
}
However, user will still be able to use the scroll bar. This can be solve by adding this code
<span class="pun">document.body.style.overflow = 'hidden';
</span>
this will disable scrolling and cause the content to stay still. Depending on your need, the code produce by Hunlock can be alter accordingly.
test5 to test~
update: 27 June 2009****
I have changed the method above to include a box when the grey out appeared and a event handler attached with it so that it can be easily return back to its original form when clicked. Apologize if i did not make this update clean enough as i sort of made a quick update on it in order to answer Sanynn question below.
update: 12 July 2009*****
Update the method so that the box is align on the center, in order to align the box on the center when using position absolute, you must reset the four corner to 0 and margin to auto. Having problem aligning the box to center? Solve your problem easily with align center with CSS
update: 25 July 2009*****
If you are using jQuery, you may want to visit Simple Grey-Out Screen Effect with jQuery This article shows a complete grey out effect and how it can be done easily with just few lines of codes.
update: 24 September 2009*****
Updated the script so that the box will follow the scroll bar. The key is to position it 'fixed' and remember to placed up the DTD such as the one show below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If not IE won't align center. That's all! đŸ™‚
