Here is the quick and easy way 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 within your existing site.
When a link is clicked a div that wraps the entire page becomes visible and lies 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.
The HTML
<!–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 you are going to 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 take is the “.alert” link which will be the trigger for the message box when clicked.
Here 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.
The CSS
Now let’s use CSS for overlay and 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; }
The jQuery
Below is the jQuery.
//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());
});
When you need to customize that page 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.
Download Source File – Dim and Cover Background with jQuery
This is great, it’s quick and easy, and I can see me using it a lot in the future.
One thing I did though is close the div of dim/fuzz first rather than using it to wrap msgbox. This allows the msgbox to be centered to the window, rather than centered to dim/fuzz, which may go off the screen. Makes it more stable when resizing.