Ayuda con esta evento onload

diego1221 · 20 Julio 2015, 18:08 PM

Tengo este codigo

Código (javascript) [Seleccionar]

<script>
function desaparecer() 
{ 
        document.getElementById('mi_capa').style.display = 'none'; 
}  
</script>

Código (html4strict) [Seleccionar]

<body onload="setTimeout('desaparecer()', 1000)">

<div class='mi_capa' id='mi_capa' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
	
<form action="validar-password.php" method="post">
Escribe una clave:
<input type=password name="clave">
<input type="submit" value="Enviar">
</form>	
</div></div>

lo que quiero es que cuando pulse el botón, se ejecute la acion del body onload sin nesecidad de que sea con el tiempo, es decier que cuando pulse el boton, el body me carge, llevo muchi tiempo intentando por no he podido por que en el form hay una action y no se que ponerle para que el body onload se ejecute.

Gracias por su ayuda

Mod: Obligatorio el uso de etiquetas GeSHi.

ivancea96 · 20 Julio 2015, 19:42 PM

Al boton ponle un onclick que llame a otra función.

No entendí bien. ¿Quieres que al pulsar el boton, se elimine el timeout? Para eliminar timeout, basta poner clearTimeout(id). Ese ID es el que retorna setTimeout(). Así que la idea es que body onclick llame a una función que hagas. Poner el setTimeout directamente no me parece una buena práctica.

#!drvy · 21 Julio 2015, 15:18 PM

Aunque tampoco entiendo que es lo que quieres hacer, creo que lo que intentas es ocultar el formulario cuando este se enviá. Si es asi, solo te hace falta esperar un evento de envío sobre el formulario.

Código (html4strict,5) [Seleccionar]

<body>

<div class='mi_capa' id='mi_capa' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
    <form id='formulario' action="validar-password.php" method="post">
        Escribe una clave:
        <input type=password name="clave">
        <input type="submit" value="Enviar">
    </form>
</div></div>

<script type='text/javascript'>

document.getElementById('formulario').addEventListener('submit', function(event){
    document.getElementById('mi_capa').style.display = 'none';
});

</script>

</body>

Si quieres que tome algo de tiempo, cambia el JS así:

Código (javascript) [Seleccionar]

<script type='text/javascript'>

document.getElementById('formulario').addEventListener('submit', function(event){
    event.preventDefault();

    document.getElementById('mi_capa').style.display = 'none';

    setTimeout(function(){
        document.getElementById('formulario').submit();
    }, 1000);
});

</script>

Saludos

Usuario Invitado · 21 Julio 2015, 16:43 PM

Si quieres que desaparezca con un efecto, solo agrega una clase CSS:

Código (css) [Seleccionar]


.form-hidden {
    opacity: 0;
    height: 0;
    visibility: hidden;
}

Dado que display no es animable, le hacemos un height: 0 y actúa como un display: none. El formulario, debe tener la propiedad transition.

Demo JSFiddle

Test Foro de elhacker.net SMF 2.1

Ayuda con esta evento onload

diego1221

ivancea96

#!drvy

Usuario Invitado