14/05/2012

Criando janelas modais com JQuery

Quem trabalha com o Desenvolvimento Web há algum tempo, sabe o trabalho que é fazer formulários, principalmente antes do "boom" do Jquery e do Ajax.

Pois bem. Hoje, eu vou mostrar para vocês uma forma muito simples de se fazer um formulário que irá abrir em uma janela modal, ou seja, a janela será um div que abrirá em destaque e o fundo será escurecido, como já encontramos em alguns sites na web.


Para isso, vamos precisar de 3 arquivos: um CSS que irá formatar nosso formulário e nossa página também. O HTML propriamente dito e um arquivo JS, onde ficará o código que fará com que a janela tenha o efeito modal ao clicar no link:

CSS
Você pode perceber no CSS que teremos que zerar algumas configurações das tags que já vem nos browsers, principalmente margins e paddings, borda nas figuras, link sublinhado, etc. Isso é importante para que a parte do escurecimento ocupe 100% da janela do browser. O importante também é que você deve ter um arquivo PNG de fundo escuro e com alguma transparência que deverá ser utilizado como background do #mask, conforme segue:

* {
    padding: 0px;
    margin: 0px;
}

body {
 font-family: arial, sans-serif;
 font-size: 14px;
 
}


h1, h2, h3, h4, h5, h6 {

    padding: 0;
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}


li {
    list-style: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


img {
    border: none;
}



#container {
    width: 940px;
    margin: 0 auto;
    display: table;
}

#conteudo {
 float: left;
 width: 940px;
 min-height: 300px;
 padding: 10px;
}


#mask {
 background: url(transpl.png); 
 width: 100%; 
 height: 100%; 
 position: fixed!important; 
 position: absolute; 
 z-index: 9000; 
 display: none;
}

.esqueci-senha {
 position: absolute;
 display: none;
 z-index: 9999;
}

.form {
 margin: 0 auto;
 width: 470px;
 min-height: 470px;
 display: table;
 background: #fff;
 border: 1px solid #f90;
 padding: 10px;
 margin-bottom: 50px;
}

.form input.button {
 padding: 5px 20px;
}

.form label {
 display: inline-block;
 width: 100px;
 text-align: right;
 margin-right: 10px;
}


.form  p {
 display: block;
 padding: 5px;
 
}

.form h2 {
 display: block;
 background: #069;
 color: #fff;
 padding: 5px;
 margin-bottom: 10px;
}


.form input.field {
 width: 250px;
 padding: 5px;
 border: 1px solid #069;
 color: #069;
}

.form input {
 margin-left:  20px;
}

p.forgot {
 background: #fff;
 text-align: center;
}

p.forgot a {
 font-size: 20px;
 color: #069;
}

p.forgot a:hover {
 text-decoration: underline;
}

Outra observação importante é que o z-index do formulário deve ser sempre maior do que o z-index da div que aparecerá escurecendo o fundo e que por sua vez, deve ter o z-index maior do que todos os itens da página.

HTML - Head
<link rel="stylesheet" type="text/css" href="modal.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="modal.js" type="text/javascript"></script> 


HTML - Body
  
<!-- Div que irá escurecer a tela de fundo -->
<div id="mask"></div>
 
<!-- Div oculta que será chamada pela function openModalForm -->
<div class="esqueci-senha">

 <div class="form">

  <h2>Esqueci Senha</h2>

   <form action="esqueci.php" method="POST" id="form-esqueci">

    <p><label>E-mail:</label><input class="field" type="text" size="30" id="email" name="email" value=""></p>
    <p><label></label><input name="submit" class="button" type="submit" value="Enviar"></p>

   </form> 

 </div>  
 
</div>
<div id="container">
 <div id="conteudo">
  <p class="forgot">
    <a href="javascript:openModalForm('.esqueci-senha','cadastro_js','valida.esqueci.senha.js');">Clique aqui para visualizar o efeito modal.</a> 
  </p>
 </div>
</div>


JQuery
Dentro do arquivo modal.js, crie uma função com a seguinte assinatura: openModalForm(classe, validacao, src), onde o parâmetro classe será a classe do div onde estará o form que deverá ser exibido, validacao e src, serão a id do script de validação e o caminho onde o arquivo de validação se encontra, respectivamente.

function openModalForm(classe, validacao, src) {

 //insere a tag de validação do formulário
 $('head').append('<script id="' + validacao + '" src="' + src + '" type="text/javascript" />');

 $(classe).css("margin-top","10px");

 $('#mask').fadeIn(500);
 $('#mask').fadeTo("slow",0.8);
 

 var h = $(document).height();
 var w = $(document).width();

 var fh = h / 2 - $(classe).height() / 2;
 var fw = w / 2 - $(classe).width() / 2;

 $(classe).css('top', fh);
 $(classe).css('left', fw);

 $(classe).fadeIn(1000);


 $('#mask').click(function() {

  $('#mask').hide();
  $(classe).hide();
  $('head').remove(validacao);

 });

}

Com esse código você poderá colocar mais de uma janela modal em sua página, basta que os divs sejam referenciados como classe (não se pode utilizar 2 ids em uma mesma página e é considerado um erro grosseiro) e estejam com o display: none. 

Na próxima semana, iremos falar sobre a validação de formulário com jquery e utilizaremos este mesmo modelo para inserir uma validação para cada formulário oculto.

Para visualizar esse post em funcionamento, clique aqui.

Obrigado a todos pela leitura, quem quiser tirar dúvidas, entre em contato pelo e-mail [email protected] ou pelo meu twitter @kalcarvalho

2 comentários:

Eduardo Mozart de Oliveira disse...

Parabéns pelo post! Me ajudou muito!
Poderia ter disponibilizado a imagem para download, para ajudar webdesigners que não possuem Photoshop instalado ou não sabem fazer imagem de fundo transparente (eu sou ambos o casos). Obtive a sua usando o Firebug, mas seria interessante disponibiliza-la na leitura.
Gostei bastante do fato de você ter dado o exemplo funcional também. Se não entendemos algo, podemos ver no que erramos.
Um abraço!

Anônimo disse...

Webdesighners que não sabe fazer uma imagem de fundo preta...
Essa foi boa cara...