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
