Blog InfoAqui: Criando janelas modais com JQuery
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:
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:
background: url(transpl.png);
.esqueci-senha {
.form input.button {
.form  p {
.form input.field {
p.forgot {
p.forgot a {
p.forgot a:hover {
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.
<link rel="stylesheet" type="text/css" href="modal.css" />
<!-- Div que irá escurecer a tela de fundo -->
<!-- Div oculta que será chamada pela function openModalForm -->
<div class="esqueci-senha">
<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>
<a href="javascript:openModalForm('.esqueci-senha','cadastro_js','valida.esqueci.senha.js');">Clique aqui para visualizar o efeito modal.</a>
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");
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);
$('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
Tags: cadastro, fadeIn, fadeOut, Jquery, modal, z-index
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.