Capa aviso

La idea es mostrar una "ventana" que salga al cargar la página. En esta se podría poner avisos o norma de obligado cumplimiento. Al cerrarse se podrá ver y navegar por le resto de la página. Ya que estamos, esta capa aparecera centrada.

Voy a tratar de explicar como lo he logrado... para ello hace falta un poco de javascript, de CSS y como siempre de html.

Javascript

A mi personalmente me gusta meter todos las funciones javascript que uso en un archivo a aparte, por ejemplo ARCHIVO.js, y enlazarle, en el archivo html correspondiente:

<script src="ARCHIVO.js" type="text/javascript"></script>

De esta manera creo que carga antes y sobre todo tengo todo el javascript junto.

Concretamente la función display es la encargada de jugar con la ocultación o no, para ello cambia la característica display de la capa en concreto (capa_superior) y la oculta. Después cambiamos el color de fondo del resto de la página, a uno que pasamos su valor (color_fondo).

La función sería:

function cambiar(capa_superior,color_fondo)
{
	/* Ocultar capa superior */
	document.getElementById(capa_superior).style.display = 'none'; 
	/* Cambiar color de página */
	document.body.style.background= color_fondo;
}

Hojas de estilo

Obviamente hay que jugar un poco con las capas. La página en si nos tendrán que salir en un color y después cambiarla a otro.
Además hay que definir las características de la capa emergente o superior.
Sería algo así.

/* 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 */
}

Capa de aviso

La capa de aviso en mi caso la he llamado "capa_superior" que además indico que su clase es "capa_superior". Después el texto de aviso o lo que buenamente podamos.
Si nos fijamos en el enlace, tenemos que indicamos el nombre de esta capa y un código de color, que es el con el que se mostrar la página.

<div id="capa_superior" class="capa_superior">
<p>Ejemplo de caja de aviso centrada en la página.</p>
<h2>Normas</h2>
<ul>
<li>Primera. El jefe siempre tiene razón.</li>
<li>Segunda. Si el jefe no tiene razón, aplicar norma primera</li>
</ul>
<a href="#" onclick="cambiar('capa_superior','#FFFFFF');return false;">Cerrar</a>
</div>


Navegación: Manuales » Capa aviso