Lights Out – Dimming/Covering Background Content with jQuery
This is a quick and easy approach that tackles a pretty common technique. By the end of this tutorial you will be able to add pop up message boxes complete with dimmed background to your existing site. Feel free to take a look at the demo to scope out exactly what we’ll be creating here today.
You may already be familiar with Lightbox – which does a number of the things we are aiming to accomplish today, so as an added disclaimer – The purpose of this tutorial is simply to show you how to dim/cover the background while displaying a message box.
The Concept
Here’s the gist: When a link is clicked a div that covers the entire page becomes visible and lays on top of the content. On top of that we have our message box which hides everything again when it gets closed. There are a number of different customizations we can make to this process, but it’s important to have the overall picture before tweaking too much.
Step 1 – The HTML
<body>
<!--The overlay and message box-->
<div id="fuzz">
<div class="msgbox">
<a class="close" href="#" ><img src="close.jpg"/></a>
</div>
</div>
<!--The content to be hidden-->
<div id="content">
<a class="alert" href="#" >Alert Me!</a>
</div>
</body>When applying this to your own site, you will only need to include the top overlay and message box section, as the rest is just a placeholder for this example. The one element from the “content to be hidden” section you will want/need to grab is the “.alert” link which will be the trigger for the message box when clicked.
I have named the overlay layer “fuzz” as it will be TV-style static, this is easily adjustable in case that’s not what you want – more on that in Step 2.
Step 2 – The CSS
Next up let’s take care of the styling for our overlay and message box:
/*Styles for fuzz overlay & message box*/
#fuzz{ position:absolute; top:0; left:0; width:100%; z-index:100; background: url('fuzz.gif'); display:none; text-align:left; }
/*Message box, positioned in dead center of browser*/
.msgbox{ position:absolute; width:300px; height:200px; z-index:200; border:5px solid #222; background: #FFF; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; }
.msgbox img {border:none; margin:5px;}
/*The "X" in the upper right corner of msgbox*/
.close{ top:0px; float:right; }If you want to change the overlay (#fuzz) to anything other than static, it is a simple matter of changing the background image – I have also included a semi-transparent black png that can be used for the dim effect in the attached files.
Step 3 – The jQuery
I have commented each item below to help guide you along:
$(document).ready(function(){
//Adjust height of overlay to fill screen when page loads
$("#fuzz").css("height", $(document).height());
//When the link that triggers the message is clicked fade in overlay/msgbox
$(".alert").click(function(){
$("#fuzz").fadeIn();
return false;
});
//When the message box is closed, fade out
$(".close").click(function(){
$("#fuzz").fadeOut();
return false;
});
});
//Adjust height of overlay to fill screen when browser gets resized
$(window).bind("resize", function(){
$("#fuzz").css("height", $(window).height());
});As far as customization at this stage, you could simply choose to replace fadeIn/Out with show/hide for instant results. You could also go as far as having the message box slide in from off screen. Quite a few possibilities, get creative with it.
The Wrap Up
Keep in mind that the message box can act as a canvas for whatever you like, you’re not limited to just text. I’m always fascinated to see what you can come up with. I have included two separate variations in the attached files – one with a static overlay and the other with a simple dimmed background – to help you along.
Finally I have to give a few shout out to things that inspired the article, a big thank you goes out to each:
- Use jQuery to “turn off the lights” while watching videos – Excellent if you don’t want a full screen overlay
- Carsonified’s Mike – His about page rocks the static/fuzz hard
Discussion
August 4th, 2009 at 12:14 AM
Cool post. Would it be possible to dim using opacity? It would make things a little more complicated (you would have to set the background-color of #content to #000 and then fade it out), but I think it would work.
August 4th, 2009 at 5:01 AM
nice tutorial will use it in future project!
August 4th, 2009 at 9:52 AM
Did you try it in IE6? :-\
August 4th, 2009 at 9:55 AM
IE6 is an increasingly more defunct browser, we’ve stopped going out of our way to support it – you should too : )
August 4th, 2009 at 10:15 AM
haha, yea if only every people on the net could think this way :)
btw, it seems to work on IE6->8 with ietester anyway, just no transparency with ie6. but we dont care
August 4th, 2009 at 11:54 AM
Nicely explained article! And AMEN to letting IE6 die and rot in hell where it belongs!
cheers
August 4th, 2009 at 12:44 PM
Very nice tutorial! I may very well be using this in a client project I’m working on very soon.
.-= Kayla´s last blog ..25 Brilliant Digital Art Pieces Inspired by Outer-Space =-.
August 4th, 2009 at 3:27 PM
Easy to follow, even a novice can tackle this tutorial. Nice job!
.-= EasyWPAdmin´s last blog ..WordPress Version 2.8.3 =-.
August 6th, 2009 at 1:11 AM
How can I just this effect in conjuction with client-side image map? I have a large composite of 60+ people.
basically, I want the user to click on a portrait of an individual and have a bigger(different) image pop up like this effect.
check out my yahoo answers question
http://answers.yahoo.com/question/index?qid=20090805211813AAi8L2E
August 6th, 2009 at 10:47 AM
You will just have to make a lot of separate click events for each of the 60 people and have each trigger an image in the msgbox
August 6th, 2009 at 3:20 PM
not sure what you mean there
how can i make events for each map?
August 6th, 2009 at 3:54 PM
This is a click event
$(“.alert”).click(function(){
$(“#fuzz”).fadeIn();
return false;
});
You will have to make one for each person, which causes the desired div (in this case #fuzz) fade in
August 6th, 2009 at 7:38 PM
very good,thanks.
August 13th, 2009 at 1:26 PM
Sam, Is it possible to adapt this for 404 error page for example? Could you give me a little hint on how to do that?
thanks
August 16th, 2009 at 12:56 PM
@Erwin Schro
I’m not entire sure what you’re trying to do, I suppose you could implement this on a 404 page in the same way you would on any other page.
August 20th, 2009 at 3:03 PM
It’s great to prevent user from over action in forms. Thank you a lot!
August 25th, 2009 at 11:06 AM
How do you make it where it just automatically dims without having to click?
.-= Michael Soriano´s last blog ..Getting Rid of Unwanted Backslashes in WordPress Form Input =-.
September 2nd, 2009 at 11:07 PM
Thanks, cool application
September 11th, 2009 at 1:43 PM
Nice tutorial… would be useful in future projects.
.-= Hetal´s last blog ..Working with Eclipse and Code Igniter =-.
October 26th, 2009 at 10:42 AM
I use JQuery UI scripts for creating such kinda model dialogs. btw, I like the ‘static’ model dialog with all thoise ‘noise’ animations. it’s classic. :)
.-= Veera´s last blog ..Firefox 3.6 to support Web Open Font Format =-.
October 30th, 2009 at 3:14 AM
it seems a position problem if apply to a long page, the popup div even couldn’t see if the page long enough (appear very below), any bug fix about it?
November 23rd, 2009 at 8:37 PM
Thanks for this. Its very well explained. I have one question though. How could i use an image button that will open the div. This is my current code.
the button button-left is my css code for the button but when i try the above code it never opens the div.
December 3rd, 2009 at 1:56 PM
Awesome demonstration! I definitely will find a use for the “Static” overlay.
January 14th, 2010 at 6:31 AM
Great post, just one little bug, if the page is a long one and the scroll bar is needed, if you scroll down straight after you hit the dim button, the page below is still visible. Is there anyway around this?
March 2nd, 2010 at 10:02 PM
love your tuts, just have a question not to insult your knowledge at all, but wouldnt it be better to use
left:auto
right:auto
to center in all browsers?
March 13th, 2010 at 12:48 PM
Great site!
I’ve been trying to customise this overlay method, by creating the overlay with javascript. I managed to do so but couldn’t get it to fadeIn without fading the page content too.
Any chance you could suggest a method to create this.
x
May 9th, 2010 at 11:19 AM
Hey, Great tutorial!!
but what if i want to upload an html page or swf file instead of the subscribe.jpg (after the screen is dimmed). is that possible?
–Thanks
May 13th, 2010 at 10:24 PM
hmm, any chance i can get an answer to my question? :(
June 6th, 2010 at 8:06 PM
I’m developing a web side for print service http://www.tils-print.co.uk and this is exactly what I was looking for. Great idea!!!
June 24th, 2010 at 8:36 AM
hmm Andy was it? You could try doing #fuzz{position:fixed;}
instead of absolute to avoid seeing scrollable content.
July 5th, 2010 at 4:54 AM
hi! I’m a newbie in jQuery. Thanks for sharing your brilliant idea!
I’ve modified your script for the benefit of IE6 users… And added some jQuery effect so that whenever you scroll the page, the message box follows…
here’s the link:
http://xyneodrew.blogspot.com/2010/07/dimming-background-message-box-with.html
thanks dude!
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.