Honestly, I don't know a better name for this technique than a page gray-out with a dialogue box pop-up (if this actually has a name, or you know a better one, please do inform me). What I'm talking about here is a technique that instantly grays-out the entire web site when you click a link, so that all your attention shifts to the pop-up that is loaded. The technique is used quite often by Web 2.0 enabled websites, so I bet that you have already seen something like it and probably thought that it was pretty cool.. That was exactly what I thought, so I tried it out and came up with a simplesolution which I want to share with you all.
A demonstration is available right here, and I suggest you load it up so you know what I am talking about! The simple (ugly) page has a neat Javascript application build in, that allows you to dynamically fill an Unordered List (UL html element). The fun part is of course the way the dialogue box is presented! After you click the link the entire page grays-out (it's not even accessible anymore) and a dialogue box pop-up is presented where you can fill in the new entry's value.
Some neat things about this solution:
- Enter/Return key is enabled, so you don't have to (mouse) click the Add button.
- You can press the ESCAPE button, which will close the dialogue box. If the new value field is not empty, the script will first ask for confirmation.
- 'Focus' shifts to the pop-up (so the user can start typing right away).
- The gray overlay always fills out the entire page, even if the resize the page later on.
- The script is both MSIE and Firefox compatible (tested in MSIE7 and Firefox 2.0, should work in older versions as well, perhaps not IE4/IE5).
Please note: this script uses the Prototype and Scriptaculous libraries, which are available for free on the respective websites.
How it is done
The most important part is the overlay. This DIV element is hidden at first, but can be made visible using Javascript. The CSS style of the element is very important:
- position: absolute;
- left: 0px; top: 0px;
- width: 100%; height: 100%;
- background-color: #666666; /* dark gray */
- opacity: .7; filter: alpha(opacity=70); /* opacity: partly transparent */
- z-index: 1000;
The dialogue pop-up is positioned above the gray overlay, so that it is accessible and visible to the user. After the dialogue box is either submitted or closed (using the close link, or the escape button) the gray overlay and dialogue box are hidden again.
20 comments:
nice one... just what i was looking for.
thanks
Nice effect, but the problem is that this effect (and the millinos of other effects people are now using) requires the massive Prototype & Scriptaculous libaries. Can't something this simple be done without using those nasty things?
I suppose it could, but it's just convenience.. Furthermore, for me personally, I don't build any websites without the JS libraries.. So there's no point in not using them for me!
Pure evil. When I first came across this method, I just stared at my browser in disbelief, feeling violated. Whoever first came up with this deserves to burn in hell with the guy who invented pop-unders and whoever first wrote a popup that brings up more popups when you close it.
There appears to be a problem with ie 6 and the height of the grey div, doesnt like 100%.
This doesn't really work. Try resizing your browser window's height to be very small (i.e. resize it so the page needs to be scrolled in order to read to the bottom). When you gray-out the screen, you can scroll down and see that the lower part of the page is NOT grayed-out! All bottom links are clickable, etc. You're only graying-out the viewable area, NOT the entire web page.
just add a div with width and height 100% - set position to absolute, left:0 top:0 - z-Index to 1000 (bigger than everything else on the page) and with a transparent background image, give it an id='blackout'
then create another div - the div you want to display on top (say an input or save box dialog), position it (absolutely)) and set the z-index to 1001 (one bigger than the. give it an id - say 'save'
now you can get the divs by id and hide and show them as you required. so much easier and works superb.
Heres some sample code:
THE BLACKOUT DIV - replace ! with < or
!div id="blackout" style="visibility:hidden; position:absolute; left:0; top:0; width=100%; height=100%; Z-INDEX:1234567891; background-image:url('/images/transparentback.png');"!!/div!
A DIV YOU WANT TO DISPLAY ON TOP
!div id="saveSuccess" class="saved"!!div class="savedtext" style="position:absolute; top:20; left:36;">Save successful !!/div!!/div!
now call hide and show when you required...
document.getElementById('saveSuccess').style.visibility = 'visible'; etc etc
Cheers,
Jules345
hi - this works good except like the previous commenter said, it only grays out the window, not the page. For pages that have scroll (either horizontal or vertical) it will not gray out the area once you scroll. I tried setting the width/height of the overlay div to 200% but that caused the unwanted effect that the overlay created a scroll when the original page didn't have one. I'd definitely would be interested in solutions..not much of a div guy myself.
hi anon (last comment)
you can attach an on scroll event to your page... i.e. window.attachEvent('onscroll', updateUI);
then in the function triggered by the event you can adjust the location of the div (or other element) so it still overs the entire screen. i.e. in this case the function updateUI might contain the following code...
var x,y;
y=document.body.scrollTop;
x=document.body.scrollLeft;
document.getElementById('blackout').style.pixelTop = document.body.clientHeight - document.getElementById('blackout').style.pixelHeight + y;
document.getElementById('blackout').style.pixelLeft = x;
this will ensure that the whole screen is always blacked out
Cheers,
Jules345
Easy solution, if you don't like the huge prototype and scriptaculous libraries.
<script language="javascript" type="text/javascript">
function showPopUp()
{
document.getElementById("dialogue").style.display = "";
document.getElementById("overlay").style.display = "";
}
function hidePopUp()
{
document.getElementById("dialogue").style.display = "none";
document.getElementById("overlay").style.display = "none";
}
</script>
<style type="text/css">
*html #overlay
{
/*\*/
position:absolute;
top: expression(((ignoreMe = document.documentElement.scrollTop? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
left: expression(((ignoreMe2 = document.documentElement.scrollLeft? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
/**/
}
</style>
<div id="dialogue" style="position:absolute;z-index:2000;top:280px;left:240px;width:340px;height:130px;border:1px solid black;background-color:#0055E7;font-size:12px;font-weight:bold;color:white;display:none">
Pop Up Window
<table style="margin:13px 5px 5px 5px;background-color:lightyellow;color:black">
<tr><td align="center" colspan="2">What would you like to do now?<br /><br /></td>
</tr>
<tr>
<td><input type="button" name="btn_Close" id="btn_Close" onclick="hidePopUp()" value="Hide PopUp" /></td>
<td><input type="button" name="btn_Nothing" id="btn_Nothing" onclick="return false" value="Nothing" /></td>
</tr>
</table>
</div>
<div id="overlay" style="position:fixed;z-index:1000;top:0px;left:0px;width:100%;height:100%;background-color:#666666;opacity:.7;filter:alpha(opacity=70);display:none"> </div>
That's all. Now the overlay is fixed.
Hi, tried using the example without using the libraries but does not seem to work ? I might be doing something wrong.
Could you put a html page example with this approach ?
Thanks, it works in IE6 as well
The effect is called "lightbox"
Nice effect. I got it working, but now I am trying to use it about ten times on the same page with no luck. Can you use this multiple times on the same page, and if so how is the positioning fine tuned. Cheers.
To achieve the same effect without extra libraries checkout this page
http://www.hunlock.com/blogs/Snippets:_Howto_Grey-Out_The_Screen
your method does not work on IE7 if there is a scroll.
same problem that lead me to your page...
You describe this effect as "cool"; I describe it as "annoying". Pop-ups, in whatever form, are evil.
does it work in apple safari? what version? thx
i have a scrip for gray out bacground how do i make it automatic pop up after 5 seconds or even a few some one please help me email me at
Shawn@moverscommunity.com or
avidanbanks@gmail.com i need help please email me
I MUST object!! If you have pop-ups disabled then you will constantly find web pages greyed out and have NO IDEA WHY! This has been REALLY ANNOYING!! I didn't know what the hell has been happening so I googled it and found this blog. I don't know why everyone things it's "SO GREAt" since, I believe a LOT of people disable pop-ups and so we get a greyed out page and don't know why and click all over and hit keys to get out of it! It's NOT as good as you say it is. Its just ANNOYING to most of us. I'm a driver developer so I am not up on the new web things, so I'm not a standard user. But I imagine that the standard user is getting really frustrated at this new "great thing" that you think you have created. ARG!
Post a Comment