mai 6

Criando um Pop-Up em JavaScript

Olá pessoal, neste artigo vou mostrar como criar um Pop-Up ou simplesmente abrir uma nova janela no navegador de forma estática e dinâmica.

Vamos primeiro ver o comandos que fazem isso.

Para abrir uma nova janela se usa o comando window.open(“endereço”, ”modo”, ”propriedades”). O primeiro argumento é o endereço da página que você quer abrir, depois você pode colocar o ‘modo’ que nada mais é do que _blank (significa nova janela) na maioria das vezes, afinal queremos abrir em uma nova janela e o ultimo parâmetro você pode colocar varias opções todas separadas por virgula como veremos abaixo, alguns argumentos são:

location: barra de endereço;

toolbar: botões do navegador;

status: barra localizada no rodapé do navegador;

scrollbar: rolar a pagina;

resizable: redimensionar a página;

width: largura da página;

height: altura da página;

top: distancia do topo da tela;

left: distancia do lado esquerdo da página;

Obs: As opções resizable, location, toolbar, status, scrollbar podem não funcionarem em alguns navegadores, como por exemplo a opção resizable que não funciona em nenhum navegador mais novo.

Agora vamos ver isso na pratica.

De forma estática:

Para este exemplo eu usei um botão para que quando o usuário cliquar abrirá uma página, mas poderia ser um link também.

<button type="button" onclick="abrirPagina();">Abrir arquivo ou site em Janela</button>

A função chamada por este botão é:

function abrirPagina()
	{
		window.open("http://www.criandowebsite.com","_blank","toolbar=no, location=yes, directories=no, status=no, scrollbars=yes, resizable=yes, width=800, height=600, top=30, left=50");
	}

Perceba os parâmetros, primeiro eu passei o link que eu quero que o usuário visualize, o segundo parâmetro é padrão. Veja como se usa as varias opções do ultimo parâmetro, criamos uma página com tamanho de 800×600 e distanciamos 30 pixels do topo da página e 50 do lado esquerdo. Atente ao fato que o endereço poderia ser uma página do seu servidor, ou uma página PHP que gera algum tipo de conteúdo, enfim…, as possiblidades são infinitas.

Nada de muito complicado, não é mesmo? Vamos para os conteúdos dinâmicos.

De forma dinâmica:

Para este exemplo usarei um botão praticamente igual ao do exemplo acima, só mudei o nome da função a ser chamada.

<button type="button" onclick="criarJanela();">Nova Janela Criada</button>

O JavaScript agora fica assim:

function criarJanela()
	{
		janela = window.open("","_blank","toolbar=no, location=yes, directories=no, status=no, scrollbars=no, resizable=no, width=400, height=400, top=200, left=250");
		janela.document.write("<h1>Criando uma nova janela</h1>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
		janela.document.write("<p>fdfsdfs df sdf sfsd gfgdf gdfg sdf sdf</p>");
	}

A ideia é mesma, mas a diferença é que atribuímos o objeto window.open() a uma variável chamada janela, depois começamos a escrever conteúdo através do objeto document.write(). Perceba que escrevemos código HTML normal dentro da função. Isso pode ser usado com PHP para transferir um conteúdo da página principal para um Pop-Up, como por exemplo visualização de impressão.

Abaixo você encontra o link para download e visualização online dos exemplos apresentados. Qualquer duvida é só comentar, até a próxima.