Add a div on top of all html elements

Question

I have a html page with different elements and I want to add a div with a kind of transparent effect to hide the content of my page. I tried to wrap my whole page in a div just after the body with the following css

<body> <div style="position:relative;width:100%;height:100%; background-color:red;z-index:9999999"> </div> </body>

Can anyone help?

possible duplicate of [Full Page Blur in CSS](http://stackoverflow.com/questions/371209/full-page-blur-in-css) — Sam Hanley, Nov 17 '14 at 18:29
If you want to create a div around all inner elements in the body, you can do the following javascript: document.body.innerHTML = '
' + document.body.innerHTML + '
' — YuriG, Nov 17 '14 at 18:32

score 0 · Answer 1 · answered Nov 17 '14 at 18:28

0

change position:relative to position:fixed or position:absolute and add:

 top:0;
 left:0;
 bottom:0;
 right:0;

answered Nov 17 '14 at 18:28

scooterlord

15,124
11
49
68

score 0 · Answer 2 · answered Nov 17 '14 at 19:29

Something like this ?

#modal{width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:1000;background-color:grey;opacity:.8;display:none;}

<div id="modal">modal window<button onclick="document.getElementById('modal').style.display='none'">Close</button></div>
<div id ="Mainwindow">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div><button onclick="document.getElementById('modal').style.display='block'">Display modal</button>

Shouldn't use opacity, since it's going to make the inner divs of that overlay div transparent as well. — , Nov 17 '14 at 19:33
There isn't any inner divs. I was only using it to show the effect anyway , opacity wasn't needed — Billy, Nov 17 '14 at 19:38

Add a div on top of all html elements

2 Answers2