Gostaria de saber se por exemplo existiria um modo de fazer a seguinte situação:
Clicar em um botão e aparecer o form, e clicar novamente no mesmo botão e o form fechar.
Desculpe não saber explicar muito bem, espero que consigam compreender.
Gostaria de saber se por exemplo existiria um modo de fazer a seguinte situação:
Clicar em um botão e aparecer o form, e clicar novamente no mesmo botão e o form fechar.
Desculpe não saber explicar muito bem, espero que consigam compreender.
Segue abaixo um exemplo que fiz com Javascript puro e sem efeitos de fadeIn
ou fadeOut
para ficar mais simples de entender.
Explicando:
O funcionamento é bem simples, quando o botão recebe um click ele chama uma função que executa uma condicional switch case
que abrirá ou fechará o formulário, dependendo do valor da variável estado
declarada em escopo global para poder ser alterada sem problemas, o default
dela é false
porque inicialmente o formulário encontra-se fechado.
var estado = false;
function abreFecha() {
var frm = document.querySelector("#frm");
switch (estado) {
case true:
frm.style.display = "none";
estado = false;
break;
case false:
frm.style.display = "block";
estado = true;
break;
}
}
* {
margin: 0;
padding: 0;
}
#frm {
display: none;
width: 50%;
height: 50%;
background: #ccc;
position: absolute;
left: 25%;
top: 25%;
padding: 2%;
box-sizing: border-box;
overflow: auto;
}
input,
textarea {
width: 100%;
margin-bottom: 20px;
box-sizing: border-box;
}
<button onclick="abreFecha()">Abrir Formulário</button>
<form id="frm">
<h2>Formulario</h2>
<hr><br>
<span>Nome:</span>
<br>
<input type="text">
<br>
<span>Email:</span>
<br>
<input type="text">
<br>
<span>Mensagem:</span>
<br>
<textarea></textarea>
<br>
<button>Enviar</button>
</form>