Abrindo janela em ajax e css com o GreyBox

O GreyBox é um script criado utilizando a biblioteca jQuery fácil de ser utilizado para criar janelas popups no seu site.
Você pode exibir uma outra página, outro site ou até galeria de imagens e vídeos e Flash.
O sistema não abre uma nova janela do navegador e por isto não sofre interferencia de bloqueadores de popup.
O melhor que pode atualizar a janela, submeter formularios que a janela não se fecha, também é compatível com Internet Explorer, Firefox, Opera, Safari e Chorme.

O visual da janela pode ser personalizado editando um arquivo CSS. O script e demais arquivos ocupam apenas 22kb de espaço.

Abaixo irei mostrar como é simples utilizar o Greybox.

Bem inicialmente incluimos todos os arquivos do ”Greybox”

1
2
3
4
5
6
7
8
9

 
<script type="text/javascript">
var GB_ROOT_DIR = "onnclick.net/blog/greybox/";   //aqui voce passa o caminho onde encontra-se o diretorio do greybox
</script>
 
    <script type="text/javascript" src="greybox/AJS.js"></script>
    <script type="text/javascript" src="greybox/AJS_fx.js"></script>
    <script type="text/javascript" src="greybox/gb_scripts.js"></script>
    <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />

Para chamr o Greybox basta apenas informa o link o height e widtch da janela

1

<a href="meuLink.php" title="Relatorio" rel='gb_page_center[800, 500]'>	Link</a>

Muito facil mesmo galera né galera ???.

Uma forma de fechar o greybox, ele pode ser chamado em qualquer evento do javascript (onClick, onLoad…), meio gambiarrado, mais funciona hehehhee….

1
2
3

 
	//APOS EXECUTAR MEU COMANDO ''SQL'' POSSO FECHAR POR EXEMPLO
	echo "<script>alert('Operacao realizada com sucesso');</script><body onLoad='window.parent.parent.GB_hide();'></body>";

Mais exeplosExemplos:

http://www.orangoo.com/labs/GreyBox

Documentação:

http://www.orangoo.com/labs/GreyBox/Documentation

Download:

http://www.orangoo.com/labs/GreyBox/Download

Até a proxima……..

6 Responses to “Abrindo janela em ajax e css com o GreyBox”

  1. Júnior  on outubro 15th, 2009

    André,
    estou tentando utilizar o greybox com o Ajax, mas não está funcionando. Será que você pode me ajudar. Basicamente, na minha página, tem um link q carrega uma outra página em um div. Nesta página tem um link q faz uso do greybox o qual não está funcionando. Se eu utilizo o greybox inicialmente na página principal funciona perfeitamente. Desde já, muito obrigado.

  2. admin  on outubro 23rd, 2009

    Amigo nunca utilizar tambem o greybox dentro de uma div, caso conseguir por favor me reporte. Abraço

  3. Guilherme  on novembro 10th, 2009

    Júnior, consegui usar o greybox junto com o ajax fazendo o seguinte:
    1 - Abri o arquivo “AJS.js” e tirei a chamada para a função “AJS.exportToGlobalScope();”.
    2 - troquei a imagem “indicator.gif” por um GIF transparent.

    Perdi o Carregando, mas ganhei o funcionamento do greybox.

    Agora to querendo utilizar o greybox pelo “gb_page[500, 500]“> ” mas com paginação, como faço isso?

    abraços

  4. Rafael Gioffi  on março 5th, 2010

    Pessoal, alguem sabe como atualizar a pagina que abriu o greybox? Exemplo: Tenho uma pagina de exibição de clientes (cliente.php) e nela tem um botao para editar os dados do cliente, ao clicar nesse botão, abre um greybox com a pagina editarcliente.php e depois de fazer as alterações, queria que a pagina inicial (clientes.php) fosse atualizada. Estou tentando varios codigos javascript e sem nenhum sucesso. Se alguem puder me ajudar, ficarei mt agradecido…

  5. Andre.zip  on março 8th, 2010

    Cara indicaria a você após fechar o greybox, atualizar o conteudo de sua pagina ”cliente.php” usando JS ou mais facil ainda jQuery.
    Qualquer duvida é so postar ae no blog. Abração

  6. Emerson  on julho 15th, 2010

    Oi André, poderia por favor me passar um código de como atualizar no modo como o Rafael Gioffi pediu aí em cima, depois que editou os dados do formulário dentro do Greybox? Assim, o meu código tá redondinho, se não fosse esse detalhe, eu abro, edito e queria atualizar a página que chamou o GreyBox. Sacou? Desculpa pedir mastigado, mas é que não to conseguindo compreender um código que faça isso em JS, pois mexo mais com PHP, e a única solução que encontro fora JS é META FRESH. Mas, para mim seria inviável. Mais uma vez, ajuda aí amigo. Abraço!


Seu Comentário