Question

I wish to achive whenever an user clicks my link, only the footer will be “visible”. The other content will be having an overlay.

Whenever an user presses this link, an overlay should fade in, but not on the footer #.

<a href="javascript:void(0)" id="enableOverlay">Enable Overlay</a>

The footer, which should only be visible, after the link ^ is clicked.

<div id="footer">
   footer text 
</div><!-- End Coming Soon -->

I am very confused at this point. Since I would need to have a div around all the content except the footer. This div should have the styles of my overlay – although it should also have display:none; which will then HIDE all the content.

What should I do, to achive this effect?

Thanks in advance.

Answer 1

Naah, all you need is just this.

Malsup’s jQuery Block UI plugin is what you need. It allows you to block whatever area you want. Also you can apply your own CSS.