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:
O Estilo:
O final do HTML:
No subModal:
HTML 1:
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:
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>
