Grey out screen is done previous in JavaScript. But jQuery has became so powerful in reducing the number of codes required that makes me wanted to try how well this can be done using it. Personally, i wanted to check out how easy it is to create a grey out screen with a pop out box at the center of the screen. This is purely for the sake of exploring and experiencing how simple can a grey out screen be done in jQuery.
The Objective
The objective of this article is to produce a simple grey out screen effect in jQuery with the minimum amount of code required. Of course, this is just the goal. But let's see how simple and easy this can be done with minimum amount of codes and maximum completeness.
The Requirement
Here are the following requirement for this simple tutorial
- Basic CSS, HTML, jQuery Knowledge
- Read what is written!
Although it is obvious, but usually people tend to skip the second requirement.
The Concept
Let's imagine the body tag (also known as <body>) is the curtain and the box is the person who will appear when the curtain is closed. If the box is in the body when the curtain is closed, we won't be able to see the box!(you will see no person out on the front when the curtain closed). Furthermore, if we grey out the body tag the background of the page will change to black instead of grey which is not what we want. Therefore, the grey out screen should be placed as a standalone curtain just below the body tag (children of <body>). Normally, we will usually assume when the screen is grey out, all the child within the screen will also be grey out and those that are outside are unaffected. Unfortunately, this is not the case. It may surprise you but any element in the screen will be display instead! eg. anchor or hyperlink. Thus, if you want your element to be untouchable after grey out effect, it is best to placed grey out screen as standalone!
The Code
The code will be split into three part, HTML, CSS and jQuery. There will be more explanation than codes since we will want to understand what is going on in the code and the code is suppose to be MINIMUM
HTML
We will need three things in this article. They are 'box', 'screen' and 'button'.
<input type='button' value='grey out me!' id='button'/>
<div id='box'>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id='screen'>
</div>
And finally a lot of break to make the page long enough to detect a problem later on. The elements are describe below,
- box: the pop out box after screen grey out
- button: the button that will initialize screen grey out
- screen: the screen that will cover the whole page grey!
CSS
Well, on the CSS part we will style the 'box' and 'screen' only!
#box
{
width: 150px;
height: 150px;
background: #FFF;
border: red dotted 5px;
text-align: center;
position: absolute;
margin-left: -75px;
margin-top: -75px;
left: 50%;
top: 50%;
z-index: 20;
display: none;
}
#screen
{
position: absolute;
left: 0;
top: 0;
background: #000;
}
These can be placed in jQuery code instead but since we want it to render faster, placing them in CSS will be a much better option(It really depend on you). Let me explain the 'box' CSS first.
- Give 'box' a width, height, background color and border so that it is visible on the screen
- align 'box' to center
- position it as absolute and make it visible(z-index) even when the screen is grey out
- margin-left/top,top,left are to align it on the center of the screen (cross browser) but in a fixed way
- we hide it (the display)
The 'screen' CSS is fairly easy to understand. We have to position it as absolute and align it at the top left hand corner so that it will cover the entire screen!
jQuery
Above section should be quite clear and simple. But, the jQuery code is even easier to understand.
$(function(){
var pop = function(){
$('#screen').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
$('body').css({'overflow':'hidden'});
$('#box').css({'display': 'block'});
}
$('#button').click(pop);
});
The above should be quite basic. But the explanation are listed below,
- 'var pop = function(){..' wait until jQuery is ready!
- 'var pop = function(){..' create a function name 'pop'
- '$('#button').click(pop);..' attach an event handler, click onto the button
- '$('#screen').css({ opacity: 0.7, "w....' function activate we grey out the screen by providing the 'html' or 'page' width and height (instead of box size). This will cover the whole screen.
- '$('body').css({"overflow":"hidden"});' this is to fix the problem of using a 'fixed' center align CSS declaration
- '$('#box').css({"display": "block"});' this is to make the box appear!
It is really that easy! But going into grey out mode is simple, how about returning back to normal? Definitely, an extra event handler is required on the 'box' to reverse back the procedure!
$(function(){
var pop = function(){
$('#screen').css({'display': 'block', opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
$('body').css({'overflow':'hidden'});
$('#box').css({'display': 'block'}).click(function(){$(this).css('display', 'none');$('#screen').css('display', 'none')});
}
$('#button').click(pop);
});
I have just added two things above, can you identify them?
The Demo
The above demo and files can be viewed from the following link.
Wait!
I'm not done (nagging)! If you notice, i made a cheat on top to simplify the overall complexity. And the cheat is 'overflow: hidden' on the jQuery code. But not all browser support this! How about those that doesn't?! This is where i add in additional component so that we do not have to even rely on 'overflow:hidden'!
The Problem And Solution
The problem with the above grey out screen effect was due to the 'box' (the cheat was for 'box' too). remained at the same position when we are scrolling which is a big NO NO. Therefore, we can either make the box to align fixed at the center or move along while the user scroll (persistence box). We have illustrated the cheat for screen grey out effect using jQuery. Now we will do the second one, the persistence box.
The Persistence Box
The answer to persistence box is located at Align center of the screen while scrolling with css What we have to do here is to change the CSS 'box' position: absolute to position: fixed. Of course, we will have to remove the overflow: hidden on the jQuery statement. This will make it chase after your scroller and urge your users to take action on the 'box'. The final CSS code will look like this,
#box
{
width: 150px;
height: 150px;
background: #FFF;
border: red dotted 5px;
text-align: center;
position: fixed;
margin-left: -75px;
margin-top: -75px;
left: 50%;
top: 50%;
z-index: 20;
display: none;
}
And we will remove overflow: hidden in jQuery and the final code will look like this,
$(function(){
var pop = function(){
$('#screen').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()});
$('#box').css({'display': 'block'});
}
$('#button').click(pop);
});
This look even shorter than the previous one! Finally, we get a complete screen grey out effect in it simplest form.
Update 25 September 2009****
Matt asked a very good question below, this method will caused the grey out box stuck due to the css being set to 'fixed'. Hence, minimize to maximum in window browser will caused the grey out to stuck at the minimize size. Here is one of the solution you can live with.
$(function(){
var pop = function(){
$('#screen').css({ "display": "block", opacity: 0.7, "width":$(document).width(),"height":$(document).height()});
$('#box').css({"display": "block"}).click(function(){$(this).css("display", "none");$('#screen').css("display", "none")});
}
$('#button').click(pop);
$(window).resize(function(){
$('#box').css("display") == 'block'?pop.call($('#button')):"";
});
});
I added an event handler during resize, check whether the box is displayed and it was displaying during resize we overwrite the pop out box again. The demo page was also updated for this update.
Demo for persistence box
The demo can be viewed on the following link!
