Menu
How can I create a really basic overlay in jQuery without UI?
What is a lightweight plugin?
897
By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div . z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index . Note that this property only works with positioned elements.
One of the ways of creating an overlay is by absolutely positioning an HTML element on the page. We create <div> element in the markup then position it absolutely with the position property. After it, we give the <div> high z-index value to make it on top of all other elements on the page with the z-index property.
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
In other words, it is used to set one thing on the top of another. The overlay makes a web-page attractive, and it is easy to design. Creating an overlay effect means to put two div together at the same place, but both will appear when required. To make the second div appear, we can hover or click on one div.
An overlay is, simply put, a div that stays fixed on the screen (no matter if you scroll) and has some sort of opacity.
This will be your CSS for cross browser opacity of 0.5:
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index: 10000; } This will be your jQuery code (no UI needed). You're just going to create a new element with the ID #overlay. Creating and destroying the DIV should be all you need.
var overlay = jQuery('<div id="overlay"> </div>'); overlay.appendTo(document.body) For performance reasons you might wanna have the DIV hidden and setting the display to block and none as you need it or not.
Hope it helps!
Edit: As @Vitaly so well put it, be sure to check your DocType. Read more on the comments on his findings..
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
