jqModal – jQuery – How to use

Bom, pra começar a abordar também aspectos técnicos do meu dia-a-dia de trabalho, vou montar uma séria de “How to use” para plugins de jQuery.
Nesse primeiro post, vou mostrar como se implementa um Modal com Ajax da forma mais simples existente.

Primeiramente, é bom deixar claro que não gosto de fazer a mesma coisa duas vezes.
Então vamos fazer um engine (ou utilizar o do jqModal né) de Modal pra nunca mais termos que fazer isso.

Ingredientes

jQuery 1.3.2
jqModal JS
jqModal CSS

Modo de Preparo

– Junte todos os ingredientes dentro da tag head da sua página, de preferência, na ordem colocada a cima.

– Crie sua estrutura genérica de modal (o recheio).
Ela deve ser um container (particularmente, uso div)  com classe jqmWindow (a menos que vc altere no jqModal.css) e um id definido.
Dentro dela deve haver  um outro container que vai receber o conteúdo do modal, que também deve ter um id definido.

– Agora você junta a massa com o recheio.
<script type=”text/javascript”>
$(‘#id_container_principal’).jqm({ajax: ‘@href’, target: ‘#id_container_conteudo_modal’});
$(‘#id_container_principal’).jqmAddTrigger(‘a.openModal’);
</script>

Cobertura

Pronto, seu engine de modal está feito.
Pra facilitar a minha vida, coloquei isso dentro de algo reutilizável (no asp.net, dentro de um usercontrol; no asp.net mvc, dentro de um extender da classe Html; no php, em um .php separado pra dar include…).

Você adiciona isso a sua página e coloca a css class “openModal” no seus links que eles abrirão em Modal!
<a href=”http://seudominio.com/abreDentroModal.htm&#8221; class=”openModal”>Abre Dentro Modal</a>

Vantagens

– Modais não-obstrusivos
O que acontece se você clicar em um link de modal, na nossa estrutura, e o javascript estiver desabilitado?
Apenas é levado à página que seria renderizada dentro do modal

– NADA de iframes
O conteúdo do modal não é simplesmente um iframe com a página que foi solicitada.
Todo o conteúdo é lido e inserido no container de conteúdo do modal que foi definido na sua estrutura.

– NADA de kbytes a mais de conteúdo escondido
Você só traz pra página o necessário.
Um Modal é uma informação adicional, logo só é trazida ao ser solicitada pelo usuário.

– Velocidade
Se o html da página que será renderizada dentro do modal for bom, o resultado é uma renderização muito rápida, mesmo mediante ajax e etc.

Quem quiser ver funcionando em uma aplicação, acesse: http://www.minhavida.com.br/avaliacao/beleza

Lá, fiz uma alteração na renderização default do jqModal pra que sempre centralizasse o meu Modal na vertical e na horizontal.
Quem quiser essas alterações, pode roubar o js e dar uma olhada na css de lá… 😉

Até mais!