How to create an overlay div in a HTML page blocking the underneath content for access ?

Feb

13

2013

Creating an overlay div in a HTML page blocking the underneath content for access

Tags: , , , , ,

In: D/HTML Asked By: [arvin] (Anonymously)
vote
Answer #1

You can do it full screen, applying a css style to it like:


div.fullOverlay {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color:red; /*you might want to use an alpha to it for the user to understand*/
overflow: hidden;
}

Or you can apply a style like this one to have an overlay div only on a certain parent element, and not the whole page:


div.overlayParent {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:99999;/*or a max amount to be on top of all other elements*/
background-color:red; /*you might want to use an alpha to it for the user*/
/*to understand something is beneath the overlay div*/
overflow:hidden;
}

Answers Answered By: Jennifer [ Grey Star Level]

Answer this Question

Enter name & email to post an Answer. You can also Login / Join us

For a better management of this site please consider Logging in / Joining us before posting a Question. It makes everithing easier for us.

Please enter the captcha code bellow.
Logged in users don't have to use captchas. Don't have an account? Join us!

 

Link Exchange:

You can add url to the best of the internet directory. Our url is added under Reference Directory
HE Blog Directory WEB LOG SHOWWEB LOG SHOW