Aproveitando o gancho do último $_POST, que falei sobre Como validar um formulário HTML usando o plugin Validation para jQuery., hoje vou falar sobre um outro plugin jQuery chamado jOverlay, utilizado para criar box modal na tela.

O jOverlay está na versão 0.7, foi desenvolvido por Alvaro Júnior, facilitou minha vida um bocado e espero que lhe seja útil também.

Para quem não sabe o que é overlay clique aqui!.

Primeiramente, para utilizar este plugin você deve incluir no seu script a biblioteca do jQuery e do jOverlay:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.joverlay.min.js" type="text/javascript"></script>

Você pode usar as configurações padrões do jOverlay, simplesmente chamando uma div escondida com:

<a onclick="$('#box1').jOverlay();" href="javascript:void(0);">Configurações Padrão.</a>

Configurações Padrão.

Ou editar fácilmente seus parametros, podemos alterar por exemplo a cor de fundo e sua opacidade, vamos alterar o fundo para vermelho “#FF0000″ e a opacidade que por default está: “0.6″, vamos deixar “0.8″.

<a onclick="$('#box1').jOverlay({color:'#FF0000', opacity : 0.8});" href="javascript:void(0);">Clique aqui para ver como fica!</a>

Clique aqui para ver como fica!

Legal né? Vamos ver algo mais interessante!

Este plugin não está limitado somente à isso, vamos ver o que mais ele pode nos oferecer!
Agora eu quero abrir no modal outra pagina.html e após carregar o modal executar uma função qualquer.

<a onclick="$().jOverlay({ url:'teste2.html', success:function(){ alert('no lugar do alert podemos chamar uma função!');} });" href="javascript:void(0);">Clique Aqui!</a>

Clique Aqui para ver como fica!

Agora vamos fazer aparecer uma imagem e dar um auto close depois de 3 segundos.

<a onclick="$().jOverlay({url:'img_desenvolvimento.jpg', imgLoading : 'joverlay/ajax-loader.gif', timeout:3000});" href="javascript:void(0);">Abrir a imagem</a>

Abrir a imagem

Baixar o jOverlay
Documentação do jOverlay
Site do Autor

Compare preços de livros jQuery.