Question

I’ve checked out the block UI plugin in Jquery which puts an overlay over any specific element – but what if I want to apply an overlay to the entire page except for a certain area in the page? Like all contents of a div – irrespective of the divs size.

Answer 1

Using the same plugin, or any overlay/modal plugin, you could use js to set a higher z-index on the parent element of the content you want to show than the z-index of the overlay.

Not sure how you want to do this, so you’ll probably have to increase and decrease the z-index of the elements you want to show/hide. Since you said you’re using jQuery, its probably easiest just to addClass() and removeClass(). Just make sure to set the position so z-index will work.

.show-me-over-the-overlay {z-index:99999999;position:relative}

Hopefully this will give you some ideas. GL!