Question

I’m just starting to learn jQuery and I’m not sure how to enable a background effect similar to a lightbox.

I want my <div> (registration wizard) to appear at 100% opacity and I’d like everything else behind it to be somewhere around 50% opacity and non-clickable.

How can I achieve this using jQuery?

Answer 1

This is how:

$('<div id="overlay" />').css({
   position:'fixed'
 , width: '100%'
 , height : '100%'
 , opacity : 0.6
 , background: '#000'
 , zIndex:9999
 , top: 0
 , left: 0
}).appendTo(document.body);

DEMO

You may put above code in a function and call it whenever you need that overlay. To remove it when you don’t need it, you would do:

$('#overlay').remove();

---

FYI, you can also put above styles in CSS in a class and then use jQuery’s addClass to body whenever you need it and removeClass when you want to remove it.