Question

I want to show a div with some buttons ,first time my site loads and I want that the site become not usable until that div closes with one of its buttons (like when you choose an image in image.google.com and after that you see the selected picture with the site it extracted from behind it but that site is a little dark and just like a photo of the site)

I hope I could ask what I meant and if the structure of sentences are wrong I’m really sorry because english is my second language

Answer 1

<div id="overlay">
  <div id="dialog">
    Close me to see anything else
  </div>
</div>

---

#overlay{
position:fixed;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.3);
}
#dialog{
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
left:50%;
top:50%;
position:absolute;
background-color:#ffffff;
border:1px solid #666;
padding:20px;
}

---

http://jsfiddle.net/MqVMr/

Here is an updated fiddle : http://jsfiddle.net/MqVMr/1/

Full Screen http://jsfiddle.net/MqVMr/1/show/