$(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..^^
Making position:fixed may affect the height… if that div overflowed in Y axis.. think so
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
position fixed would go
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?
-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70); Try That
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
echo
alternate 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:
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?
This is worked out great with some modifications.
If anyone would like the popup fixed and always centered (so you cannot scroll past it).
.collapse {
position: fixed;
width: 700px; (you can change this)
margin-left: -350px; (if you change width, make this half the width)
left: 50%;
top: 0;
}
Thanks!
Thanks a million! you rock.
why dont we use min-height:100% ?
Hi, i got the code working, but i would like to ad a function for “clicking” it away (closing the overlay). Im novice when it comes to coding, can anyone give me hint about how fix that?
Not only your technique DOES use javascript (hell, the first thing you gotta see on your example is a link pointing to javascript:void() !!) but it is not even usable with javascript turned off, which is what alternatives are exactly good at.
Honestly I don’t see the point of this.
The overlay for BlockUI? how close it after this is called
my Jquery code is:
$(document).ready(function(e) {
$(“.mus_play > div”).click(function(){
$(function() {
var docHeight = $(document).height();
$(“body”).append(”
“);
To Luchid (above) and other site masters like him: Why not just put a blurb on your main page saying that registration is required to view your site? Those overlays are annoying as hell and not at all as cool as you think. It’s aggravating when page loads or clicks or hovers pull up unwanted shit like that.
Why did you use
$("#overlay").height($(document).height());
instead of$("#overlay").css({height:'100%'});
Is there a capability issue?
Thanks
This is worked out great with some modifications.
If anyone would like the popup fixed and always centered (so you cannot scroll past it).
.collapse {
position: fixed;
width: 700px; (you can change this)
margin-left: -350px; (if you change width, make this half the width)
left: 50%;
top: 0;
}
Thanks!
no need to find document height just give its as
.overlay{
opacity : 0.4;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: black;
z-index: 500;
}
Then just add
$(“#overlay”).addClass(‘overlay’);
How do you close this? Trying everything including:
$(‘body #overlay’).css(‘display’, ‘none’);
not getting results though…
how would i implement this from start to finish?
Thanks!
Newbie
I want to use overlay to stop user view content until they register. How to close overlay just after user press Login?
Any better way of doing this in pure javascript?
How do I use this on my Weebly site?
Thank u so much !!