Code Snippet
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?
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.