[Resolvido] Janela modal

[tiujhou 7]

Eh o seguinte... estou começando com jquery e decidi criar uma janela modal... no caso quero fazer uma sem plugin... apenas criar uma DIV e colocar fundo preto e quando clicado ele faz um efeito para fechar...

 

Até ai tranquilo... eu fiz e deu certo... eu sei que poderia utilizar a opção .fadeTo, mas acabei optando por .animate pois quero fazer mais efeitos quando fecha-lá...

 

Minha primeira dívida é a questão de inserir display:none na div #modal ... eu fiz alguns testes e acabava que ao clicar na div, ela fechava mais naum dava o efeito do .animate , pois ela inseria o display:none primeiro do que o efeito de transição do opacity...

 

Alguém sabe como posso fazer o efeito do animate primeiro .. para depois passar para o .attr e inserir o style:none ?????

 

$(document).ready(function(){
	$('#modal').click(function(){
	$(this).animate({ opacity: 0.0  }, 3000);

	$("#modal").attr('style', 'display:none');


	});		
});

 

 

 

Segunda questão.... como que faço para bloquear o clique da DIV que esta no meio da div #MODAL ... pois a que esta no meio ira mostrar o conteudo... mais quando clico nela(#box) ela acaba fechando a a DIV #modal....

 

Como posso fazer para bloqueá-la ??? apenas fechar se eu clicar na DIV #modal .. ??? Ateh mais....

 

<div id="modal">
<div id="box">
       <p>Nada a dizer</p>
</div>
</div>

[William Bruno 1501]

Alguém sabe como posso fazer o efeito do animate primeiro .. para depois passar para o .attr e inserir o style:none ?????

você pode usar o callback do animate()

 

que é uma função q é chamada, assim q termina a transição.

http://api.jquery.com/animate/

 

$(this).animate({ opacity: 0.0  }, 3000, function(){
$( this ).hide();
});

 

 

Como posso fazer para bloqueá-la ???

veja sobre o método: event.stopPropagation();

[tiujhou 7]

Obrigado.. era isso mesmo que eu precisava no caso do animate... eu jah havia conseguido... mais foi usando o setTimeout e determinando um tempo para o display:none entrar ...

 

jah a outra PERGUNTA CONSEGUI RESOLVER DA SEGUINTE MANEIRA....

 

event.stopImmediatePropagation();

 

Até mais...