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>