Append Site Overlay DIV
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});Overlays entire site with a black tint, disabling all links and bringing into focus anything above it.
I wonder if ‘fixed’ positioning would be better too if the page scrolled…. not sure I guess I should test this better.
position: fixed; will be better in that case.
Tanks..^^
Thanks a lot man! I’ve just discover your snippets repository, and i’ve become enthusiastic about it!
thanks man : -) nice and simple
i was just thinking maybe check if id exists and create some alternative id or abort?
thanks for nice sample code
Perfect! What might be a good way to utilize this, but then have a single element above it? I tried setting that elements z-index above yours, but it still get’s grayed out–any ideas?
@ryan: the ‘aboved’ element should have ‘position:relative;’
perfect! how beautiful it is !
Bon travail Man ;-)
I would like to use the site overlay for the following problem:
I would like to see the overlay while the page is being loaded. On that page data is collected from a database.
When all db-loading has finished the overlay should disappear automatically.
Can this be done?
And a second question: can I put a preloader-image above the overlay that also disappears when the page is totally loaded?
Thx!!
i would like to use a drop down menu in the north layout of jquery layout as given as follows-
http://layout.jquery-dev.net/demos/popups.html
The menu drop down elements goes behind the layout .It is not overlaying the layout to display its content from north panel
What’s the best way to make the opacity work with IE8?
Interestingly you may note that although a snippet like this may create a visual effect which would overlay the body element and render everything unclickable, this is not how it is handled by some browsers. Items in the “parent” element will still be available via tab & shift+tab keystrokes. To use this in the creation of a modal dialog, for instance, you’ll need to create a tab order that cycles only through the dialog and removing click and keypress events from the rest of the document.
Everything is still grayed out. I tried position relative, that does not work.
maybe you should add
to your css for IE Browsers.
but so … a nice snippet.
not really, no one cares about ie anymore.
You just made it so simple.. why didn’t I thought of it..
Super liked.. **
how can I code the css for this Overlay div to appear on ipads only. I’m trying to setup this function for ipad users only…
Thank you!
May I suggest using PHP-Mobile-Detect? I use it to load alternate external stylesheets for various platforms, but it’s entirely possible to use it to just
echoalternate code, for example, this snippet, if the script detects an iPad or other tablet. It works using conditional comments, so it’s pretty easy to get the hang of it.I wish I knew of a non-PHP-based way to sniff iOS.
What about conditional media queries?
Found here:
http://css-tricks.com/snippets/css/ipad-specific-css/
thanks
How do you close this? Trying everything including:
$(‘body #overlay’).css(‘display’, ‘none’);
not getting results though…
Peter
1- $(“#overlay”).remove();
2 -$(“#overlay”).hide();
Thanks! I figured it out last week… guess I could have noted that so as to not waste others brain power… :)
By the way, are there better ways to do this these days?
We’ve run into this issue on IOS:
After entering usr/pwd – keyboard is left open then press submit – the keyboard closes and the overlay does not fill the entire screen.
Thanks!
no need to find document height just give its as <br/>
.overlay{<br/>
opacity : 0.4;<br/>
position: fixed;<br/>
top: 0;<br/>
right: 0;<br/>
bottom: 0;<br/>
left: 0;<br/>
background-color: black;<br/>
z-index: 500;<br/>
}<br/>
<br/>
Then just add <br/><br/>
$("#overlay").addClass('overlay');
no need to find document height just give its as <br/>
.overlay{
opacity : 0.4;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 500;
}
<br/>
Then just add <br/><br/>
$("#overlay").addClass('overlay');
I want to use overlay to stop user view content until they register. How to close overlay just after user press Login?