Lights Out - Dimming/Covering Background Content with jQuery

11 January 2010 Monday

This application was viewed 764 times

0

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.

View the DEMO

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>
<div id="fuzz">
<div class="msgbox">
<a class="close" href="#" ><img src="close.jpg"/></a>
</div>
</div>
<div id="content">
<a class="alert" href="#" >Alert Me!</a>
</div>
</body>

<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:rightright; }

/*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());
});

$(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.

Tags: jquery, effects, modal,