poeta_urbana
Usuario Novato
Usuario Novato

Hola!!! Alguien me podría explicar como crear una venta emergente? Pero no desde un botón.

Lo que quiero es que nada mas entrar a mi página web salga una ventana con una información como sobre-encima de mi web y que se vea gris la web por debajo....y una vez que pulsas el botón X para cerrar que vaya a mi página web.

gracias

un saludo

Avatar Image
@man / @woman
@man / @woman

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>


ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Opciones:
Ir al subforo:
Permisos:
TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes
Temas similares
No se han encontrado temas similares