30 de janeiro de 2009

Criando Modais

Bom pessoal, meu primeiro Post de 2009, ano novo, um monte de coisas novas rsss...
Bom estavamos tendo problemas aqui no sistema em que estou desenvolvendo com a galera e toda vez que mandavamos emitir relatórios abria uma horrível janela pop up e o que acontecia? O Usuário não esperava carregar e apertava diversas vezes o botão para gerar o relatório e o que acontece quando você faz várias chamadas em querys extremamente pesadas? você congestiona tudo, deixa o sistema ultra-lerdo e derruba tudo...
Pois bem,
Solução Rápida: Bloquear o botão...
Problema: poderia burlar tal bloqueio se entrasse de novo no menu, pois o mesmo carregaria a tela o famoso refresh e o botão habilitaria...
Solução Boa: vamos criar um modal, assim ele bloqueia toda a tela e o usuário ou espera carregar ou fecha a janela que seria a antiga janela Pop Up.
Pois bem, eu pesquisei (crédito no SubModal ao Rubem Azenha, ele que me falou desse modal é bem simples e é o que estou utilizando no momento =).) e achei inúmeras formas de fazer o modal, com JQuery, com Prototype + Scriptaculous e com o SubModal, no final das contas eu escolhi o subModal, por ser mais simples e não necessitar de outras libs JS, como o JQuery ou o ModalBox que necessitava do Prototype + Scriptaculous, como aqui não está determinado se vamos sair do Pototype e ir para o JQuery acabei achando o SubModal como melhor solução.
Porém nesse pequeno tutorial vou colocar as 3 formas de criar o modal.
OBS: como ainda não coloquei um código para ignorar o html nas postagens tirem o "." no início das tags. EX: <.script... ficaria script sem o "."

No JQuery:
Com JQuery:
HTML:
<.html>

Coloque as Lib na sua página HTML:
<.script type="text/javascript" src="jquery-1.3.1.js"/>

O código Script:
<.script>
;(function($){
$.modal = function(opt) {
var options = $.extend(opt,{})
var overlay = document.createElement('div');
var $doc = $(document);
var dim = {
h: $doc.height(),
w: $doc.width()
}

$(overlay).css({
background:'#777',
opacity: .7,
top:0,left:0,position:'absolute',
width:'100%',
height: dim.h,
zIndex: 10000
}).appendTo('body');

var box = document.createElement('div');
var boxDim = {
w: options.width||(dim.w / 1.4),
h: options.height||(dim.h / 1.4),
ml: parseInt(options.width||(dim.w / 1.4)) / 2,
mt: parseInt(options.height||(dim.h / 1.4)) / 2
}
var btnClose = document.createElement('button');

$(box).css({
zIndex: 10001,
position:'absolute',
background:options.background||'#fff',
border:'2px solid #444',
width: boxDim.w,
height: boxDim.h,
left:'50%',top:'50%',
marginLeft: - boxDim.ml,
marginTop: - boxDim.mt
}).html(options.text).appendTo('body');

$(btnClose).one('click',function(){
$(box).remove();
$(overlay).fadeOut(function(){
$(this).remove();
});
}).html('fechar').appendTo(box);
}
})(jQuery);
$(function(){
$('.alterarBT').click(function(){
$.modal({
text:'Teste da mensagem.',
width: 300,
height: 200,
background:'#555'
})
});

});
<./script>

O Estilo:
<.style>
label {
float:left;
width:150px;
text-align:right;
padding-right:4px;
clear:left;
}
<./style>

O final do HTML:
<.body>
<.h2>Teste<./h2>
<.form id="Form" action="" method="post">
<.input type="button" value="Teste" class="alterarBT"/>
<./form>
<./body>
<./html>

No subModal:
HTML 1:

<.html>
Colocando as libs:
<.script language="JavaScript" src="common.js">
<.script language="JavaScript" src="subModal.js">

Os CSSs:
<.link rel="stylesheet" type="text/css" href="style.css"/>
<.link rel="stylesheet" type="text/css" href="subModal.css"/>

O corpo com o método modal:

<.body>
<.input name="relatorio" type="button" value="Gerar Relatório" class="botao" onclick="javascript:showPopWin('teste.html', 600, 400, null)">
<./body>
<./html>

HTML2 (teste.html):
<.html>
<.body>
Texto Qualquer.
<./body>
<./html>

No caso temos 2 htmls, 1 que é a página que tem o modal na função que chamará a segunda página.

Com o ModalBox

O HTML:
<.html>

Coloque as Lib na sua página HTML:
<.script type="text/javascript" src="prototype.js">
<.script type="text/javascript" src="scriptaculous.js? ¬ load=effects">
<.script type="text/javascript" src="modalbox.js">

Os CSSs:
<.link rel="stylesheet" href="modalbox.css" type="text/css" media="screen" />

O Link com a função do modal no corpo da página:
<.body>
<.a href="#" title="Teste" onclick=" Modalbox.show(this.href, {title: this.title, width: 600}); return false; "> Teste Link

Fim do HTML:
<./body>
<./html>

4 comentários:

Felipe Badra disse...

Bregaida, não abandona o blog, cara !!
Sempre acompanho seus posts.

Abração

Eduardo Bregaida disse...

Então, não abandonei, apenas peguei o final do ano pra trabalhar e relaxar, mas esse ano eu volto, os posts tão dificeis pq é muito pouco que estou criando diferente do padrão Struts 1.x, logo não teria coisas interessantes que alguém não tenha falado de forma bem simples, mas eu vou continuar postando sim, comecei este ano com o Modal que criei aqui e pretendo colocar mais tutoriais.

Abraços e obrigado pela força.

André Luis disse...

Fala Bregaida...
Muito bom esse modal..
quebrou mór galho lá no trampo!
valew pelo Post....

Eduardo Bregaida disse...

Obrigado, ainda vou arrumar para deixar mais bonito a parte de código, valeu.