CODEWITHSUNDEEP
jqueryhtmlcss
oliverbj
oliverbj

Reputation: 6052

css / jquery - add overlay to part of page

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.

Upvotes: 3

Views: 2995

Answers (4)

sg3s
sg3s

Reputation: 9567

Here is an example that can be used in a practical setting. It will fade in an overlay that fades over the whole page except the footer which is taken out of normal document flow and put over the overlay.

This is necessary to keep the footer interactive/above the overlay. It will also close the overlay when clicked.

http://jsfiddle.net/sg3s/fxBEg/

Upvotes: 0

Juzer Ali
Juzer Ali

Reputation: 4167

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.

Upvotes: 4

iDroid
iDroid

Reputation: 1140

Create a div(Transparent layer like overlay)after the button clicked and set it's height to the top of your footer.Then when you want to close you can remove it from the page. hope this is what you are looking for....

Upvotes: 0

11684
11684

Reputation: 7507

Have a look at css z-index, and then position an invisible div OVER it, not around it, with a higher z-index.

Upvotes: 0

Related Questions