jquery: how can i create a simple overlay ?

Question

how can i create a really basic overlay in jquery without UI ?

which is a lightweight plugin ?

Answer 1

If you're already using jquery, I don't see why you wouldn't also be able to use a lightweight overlay plugin. Other people have already written some nice ones in jquery, so why re-invent the wheel?

Answer 2

By overlay do you mean content that overlaps/covers the rest of the page? In HTML, you could do this by using a div that uses absolute or fixed positioning. If it needed to be generated dynamically, jQuery could simply generate a div with the position style set appropriately.

Answer 3

Is this what you are looking for? I also wanted a simple image overlaying with jquery and came up with that. You might not need any plugin to do simple overlaying. HTH.

Answer 4

try facebox or fancybox

Answer 5

What do you intend to do with the overlay? If it's static, say, a simple box overlapping some content, just use absolute positioning with CSS. If it's dynamic (I believe this is called a lightbox), you can write some CSS-modifying jQuery code to show/hide the overlay on-demand.

Answer 6

jqModal has always been my favorite light-weight overlay plugin.

Answer 7

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 you CSS. Say the overlay has .5 opacity (cross browser).

#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..