oprimir el boton

Elkin sanchez · #1 (**permalink**) 07/02/2012, 19:26

Hola
Quiero hacer un formulario como el de esta pagina http://twofold.com/contact
Cuando haga click en el botón aparezca el formulario.
La, propiedad debe ser display:none; y tengo nav li.parent:hove{ display:block;} con algo de transición pero yo quiero es q cuando haga clic aparezca el formulario y se qde hay. Como puedo hacer eso?
gracias

MARCASTELEON · #2 (**permalink**) 07/02/2012, 21:34

Hola,

El formulario de la pagina que pones no se hizo precizamente con display:none/block etc, pero lo que dices se puede hacer agregandole al boton el atributo onclick con un poco de javascript, asi:

Código HTML:

Ver original<button onclick="document.getElementById('idDelFormulario').style.display=(document.getElementById('idDelFormulario').style.display=='none')? 'block':'none'">Mostrar formulario</button>

emprear · #3 (**permalink**) 07/02/2012, 22:50

Algo de transición?
Jquery

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Mostrar ocultar jquery
</title>
<style type="text/css">
/*<![CDATA[*/
 
body {
font-size: 14pt;
font-family: tahoma;
}
p#mostrar{
cursor: pointer;
}
#gracias{
color: #359AFF;
}
 
/*]]>*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
        $(document).ready(function(){
         $("#miForm").hide();
         $("#gracias").hide();
           $("#mostrar").click(function(){
             $("#miForm").show(2000);
           });
           $("#validar").click(function(){
            $("#miForm").hide(500);             
            $("#mostrar").hide();
            $("#gracias").show(1500);
           });        
        
        });
//]]>
</script>
</head>
<body>
<p id="mostrar">
Complete ente formulario
</p>
<form id="miForm" action="#">
<div>
<input type="text" name="nombre" /> <input type="submit" id="validar" value="Validar" />
 
</div>
</form>
<div id="gracias">
Gracias
</div>
</body>
</html>

Saludos

Elkin sanchez · #4 (**permalink**) 17/02/2012, 08:56

gracias por sus respuestas fueron muy utilez

Elkin sanchez · #5 (**permalink**) 22/02/2012, 04:20

emprear me funciono d emaravilla pero como puedo hacer para q el boton q me abrio el formulario tambien me lo pueda cerrar?
GRacias

emprear · #6 (**permalink**) 22/02/2012, 06:47

ummmmm... si te referis a cerrarlo sin haberlo enviado, como si fuera una cancelación, podés hacer esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Mostrar ocultar jquery
</title>
<style type="text/css">
/*<![CDATA[*/
 
body {
font-size: 12pt;
font-family: tahoma;
}
span#mostrar{
cursor: pointer;
}
span#mostrar:hover{
color: #99270B;
}
#gracias{
color: #359AFF;
}
 
em{
color: #000;
}
/*]]>*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
</head>
<body>
<div>
<span id="mostrar">
Complete este formulario
</span>
</div>
<form id="miForm" action="#">
<div>
    <br />
Tu nombre <input type="text" name="nombre" id="nombre" /> <input type="button" id="validar" value="Validar" />
</div>
</form>
<div id="gracias">
Gracias
</div>
<script type="text/javascript">
//<![CDATA[
 
$(document).ready(function(){
$("#miForm").hide();
$("#gracias").hide();
   
$("#mostrar").click(function() {
var txt = $("#miForm").is(':visible') ? 'Complete este formulario' : 'Cancelar envío';
$("#mostrar").text(txt);
$("#miForm").toggle(1000);
});
           
$("#validar").click(function(){
$("#miForm").hide(500);             
$("#mostrar").hide();
var nombre = $("#nombre").val();
$("#nombre").val('');
$("#gracias").html('Gracias <em>' + nombre + '<\/em>');
$("#gracias").show(1500);
});        
        
}); //fin ready
 
//]]>
</script>
</body>
</html>

Saludos