Eso lo haces jugando con capas. Tienes que hacer la web normal y en ella poner una capa. Después con javascript podrás cerrar esta y cambiar colores...
Te doy un código muy sencillo... para empezar a jugar:
<html>
<head>
<title>Ejemplo con capas</title>
<style type="text/css">
/* Para centrar capas */
body
{
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #a099aa; /* Color cuando la página no se ve */
}
/* Capa de aviso superior centrada */
#capa_superior
{
border: 1px solid;
background: #999999;
position: absolute; /* Posicionamiento absoluto */
top: 50%; /* Desde arriba, colocar al 50% de la pantall a*/
left: 50%; /* Desde la izquierda, colocar al 50% de la pantalla */
height: 400px; /* Alto */
width: 500px; /* Ancho */
margin-top: -200px; /* Restamos la mitad de alto para centrarlo verticalmente */
margin-left: -250px; /* Restamos la mitad de ancho para centrarlo horizontalmente */
background-color: #009999; /* Color */
}
</style>
</head>
<body>
<script type="text/javascript">
/* Cerrar capa y abrir otra con otro color de fondo */
function cambiar(capa_superior,color_fondo)
{
document.getElementById(capa_superior).style.display = 'none'; /* Ocultar capa superior */
document.body.style.background= color_fondo; /* Cambiar color de página */
}
</script>
<div id="capa_superior" class="capa_superior" style="display: block;">
<p>Ejemplo de caja de aviso. En el html se hace la llamada para cerrar la misma...</p>
<a href="#" onclick="cambiar('capa_superior','#FFFFFF');return false;">Cerrar</a>
</div>
<p>El resto de la página.</p>
</body>
</html>
