The Concept
While click on link, whole page covers with div tag to become visible and lays on the top of the content. When it get closed all lays hide of top of the content. In this process we can make various customizations.
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 you implement for your own site, you’ll require incorporating the top overlay and message box section. 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.
In this tutorial named the overlay layer "fuzz" as it will be TV-style static, this is easily adjustable in case that's not what you want. Further on that in Step 2.
Step 2 – The CSS
Now the time of CSS, most carefully insert below mansion coding for overlay and message box.
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; }
---------------------------------------------------------------------------------------------------------------
You can change the overlay (#fuzz) any time, it’s a very simple thing, you can change only background image. In this tutorials semi transparent black png incorporated for dim effect. You will get all files in attachment.
Step 3 – The jQuery
---------------------------------------------------------------------------------------------------------------
In this tutorials commented each thing for helping you.
$(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());
});
---------------------------------------------------------------------------------------------------------------
You can customize at this stage, just select to replace fade In/Out with show/hide for quick results. Make creative as you want.
View demo: Covering Contents | Dimming background
Download source code