[Resolvido] Janela Modal no browser

[Lab Design 0]

Muitas vezes precisamos realmente de uma janela modal tipo dos programas desktop onde o usuário deverá fechá-la para prosseguir na navegação.

Depois de muita pesquisa na net, muitos testes com diversos scripts finalmente surge uma luz no final do túnel, a qual e gostaria de compartilhar com os demais participantes deste fórum que muito me ajuda.

 

Como muita gente já deve ter percebido, a maioria dos scripts que prometem fazer um popup modal, não funcionam corretamente, basta que se clique fora dele e temos acesso ao frame pai.

 

Aqui mesmo neste forum eu encontrei a solução postada pelo Mauricio Junior para uma solução em dotnet mas que serve para qualquer outra aplicação.

 

1) Na seção do header ou outra se preferir coloque este código:

<script type="text/javascript" src="libs/jquery-1.3.2.js"></script>
<script>
function dialogModal(url, nome, height, width) {
	eval(window.showModalDialog(url, nome,'Resizable:no; DialogHeight:'+height+'px; DialogWidth:'+width+'px; Edge:raised; Help:no; Scroll:no; Status:no; Center:1;'));
	return false;
	}

$(document).ready(function() {
	$('.show').click(function(){
		dialogModal('seuscript.php?id='+this.id, 'detail', 400, 600)
		});

	})

 

Como podemos ter várias chamadas dentro da página, é mais prático usar um clas em vez de um id.

detail é o nome do popup, 400 é o height e 600 o width. O párametro que será passado para o script é o id do link.

- A função dialogModal pode ser carregada em qualquer js e ficar disponível para qualquer página, assim como o método click do class show.

 

Examplo de chamada em html:

<a href='javascript:void(null)' class='show' id='id_do_registro'>id_do_registro</a>

 

Aproveitando o post para imprimir a página já abrindo o driver da impressora:

Envie o conteúdo para uma página separada e no final da página:

<script>
window.print();
</script>

[JCMais 75]

Cara esse código não está funcional, se alguém pegar esse código e tentar usar vai dar erro, cadê a declaração da função showModalDialog?

 

E outra coisa, lembre-se que eval is evil. Nuuuuuuunca use eval.

[Lab Design 0]

Cara esse código não está funcional, se alguém pegar esse código e tentar usar vai dar erro, cadê a declaração da função showModalDialog?

 

E outra coisa, lembre-se que eval is evil. Nuuuuuuunca use eval.

Oi JCMais, bom eu copiei este código praticamente na íntegra do post original Abrindo uma janela de forma modal

 

Eu testei num projeto Zend e funcionou da maneira que eu queria.

Quanto ao eval ou evil eu fiquei no ar com o seu comentário, poderia ser mais claro por favor, já que se voce acessar o link acima vai verificar que o codigo é praticamente o mesmo.

 

Quanto a função showModalDialog que se refere está acima do $(document).ready(function().

 

Bom estou tentando implantar para login em outro projeto e o que percebi foi o seguinte:

 

No Firefox funciona perfeitamente e após autenticar o usuário, o model se fecha e atualiza o frame principal. Enquanto o modal estiver aberto o usuário não tem acesso ao frame abaixo dele.

 

Ja no chrome, se clicar fora do modal, você acessa os links ou seja, não funcionou perfeitamente, porém no fechamento ele tambem atualiza automaticamente o frame principal.

 

Agora no IE é que a coisa fico estranha, pois ao submeter o form, os echos abrem num outro popup acima do modal mas enquanto o modal está aberto não se tem acesso ao frame abaixo.

 

Bom até agora foi essa a maior dificuldade que achei para implantar mas o mesmo está funcionando

[Lab Design 0]

Resolvido o problema no IE. Entrei num post da microsoft que relata sobre esse detalhe e a solução foi colocar somente <base target='_self'> na seção de header do pagina que é carregada no modal.