Du benötigst dafür zwei zusätzliche Divs. Hier mal eine Darstellung einer Webseite
HTML-Code:
<body>
<!-- Hier steht deine Normale Webseite -->
<!-- egal wieviele Zeilen sie hat -->
<div id="overlay" class="overlayBG"><!-- --></div>
<div id="window"><!-- Hier deinen Text rein --></div>
</body>
overlayBG ist das Div, dass die Webseite teilweise verschwinden lässt und window ist dann dass Div, welches darüber liegen soll.
Und dann brauchst du noch folgende CSS.
HTML-Code:
html, body {
height:100%;
width:100%;
}
#overlay {
position: fixed;
z-index:199;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.overlayBG {
background-color:#000;
-ms-filter: "Alpha(Opacity=75)";
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
#window {
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
z-index:200;
width:200px;
height:200px;
background-color:#fff;
text-align:center;
}
So, ich hoffe, ich dass aus meinem Code noch richtig rauskopiert und nichts vergessen.
Den Rest musst du dann selber steuern. Auf der genannten Webseite wird das Ausblenden erst durch
JS ausgelöst.
alles tranparent bis auf div 
