1

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.

1
  • 1
    Guilherme, a resposta que aceitaste resolveu o teu problema? Podemos assumir então qu a pergunta também está relacionada com JavaScript?
    – Sergio
    Commented 9/09/2015 às 5:44

1 Resposta 1

1

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>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .