Função para abertura de pop-up

Esta é uma função simples que criei tem algum tempo e utilizo sempre que preciso abrir algum tipo de Janela em formato pop-up.

Eu poderia utilizar uma função específica para cada tipo de pop-up, mas pesem: Se um site tiver links para abrir 5 pop-ups, seria 5 códigos diferentes, ou seja, como resultado o dódigo da página seria maior e a necessidade de ampliar a bande de acesso ao site poderia aumentar.

A função:

<script type=”text/javascript”>

function abre(caminho,largura,altura,rolagem){
w = largura;
h = altura;
rol = rolagem;
largura = screen.width;
altura = screen.height;
XX = (largura-w)/2;
YY = (altura-h)/2;
janela = window.open(caminho,nm_janela, ‘width=’+w+’, height=’+h+’, left=’+XX+’, top=’+YY+’menubar=no, toolbar=no,status=no,scrollbars=’+rol+’,');
janela.focus(); }

</script>

Vamos ver linha a linha como funciona.

Linha 1

function abre(caminho,nm_janela,largura,altura,rolagem){

Esta linha é onde se inicia a função, ou seja, é o nome da função e as variáveis que ela utiliza (caminho,largura,altura,rolagem).

As linhas 2, 3 e 4, nestas linhas eu coloco o conteúdo das variáveis que eu recebi via função em uma variáel que com um nome de minha preferência. Não há a necessidade de iniciar essas variáveis, uma vez que eu poderia usar os nomes que vem entre os parênteses, mas a títuli de clareza das informações, eu prefiro utilizar.

As Linhas 5 e 6 iniciam as variáveis largura e altura com o tamanho da tela de pessoa que está acessando o site utiliza. ex. 1024×768 px

Linhas 7 e 8, estas linhas são a chave para que a pop-up seja aberta centralizada na tela. É iniciada as variáveis XX e YY com a largura(altura) – a largura(altura) que você enviou via função w(h) e divide por 2.

Linha 9 inicia a veriável que abrirá a pop-up, mais uma vez, eu não precisaria iniciar a variável, bastaria que eu escrevesse o caminho depois do igual, mas para deixar o código claro, prefiro iniciar a variável.

window.open = abre a janela

caminho, esta é a variável recebida via função. Ex. “www.leandrogarcia.com/blog”

nm_janela, está é uma outra variável reebida pela função que diz qual é o nome da Janela, é o que dirá se você clicar em um outro link com esta função se deve abrir a nova página na Janela já aberta ou em uma nova. Ex. nm_janela = um, abre uma Janela; segundo clique, nm_janela = um, abre por cima da outra janela. nm_janela = dois, abre uma nova janela

width=’+w+’, é a largura da Janela

height=’+h+, é a altura da Janela

left=’+XX+’, é onde o browser entede que deve centralizar a abertura da Janela horizontalmente

top=’+YY+’, é onde o browser entede que deve centralizar a abertura da Janela verticalmente

menubar=no,toolbar=no,status=no, diz ao browser para não exibir a barra de menus, de ferramentas e a barra de status.

scrollbars=’+rol+’, diz ao rowser se haverá barra de rolagem, yes, no e auto (eu defini como variável da função, pois posso dizer se vai ou não ter barra de rolagem, mas poderia ter iniciado com yes, no ou auto.

e por último, janela.focus(); é onde o browser recebe a ordem de excutar a variável janela

Legal, coloquei esta função no meu site, como eu faço para executála?

Simples, você chama ela via link. Ex. <a href=”javascript:abre(‘http://www.leandrogarcia.com/blog’,'blog do Garcia’,’500′,’500′,’no’);”>Abrir Janela</a> ou, <a href=”#” onClick=”abre(‘http://www.leandrogarcia.com/blog’,'blog do Garcia’,’500′,’500′,’no’);”>Abrir Janela</a>

A função descrita deve ser colada entre as tags <head> e </head> do seu html, ou chamada externamente, mas isso deixa pra uma outra hora.

Espero que esta Função Ajude.

  1. Javascript para principiantes ou esquecidinhos. Aula 4 – Funções
  2. Função Trim em Javascript
  3. Javascript para principiantes ou esquecidinhos. Aula 1: Como começar
  4. Offset, descobrindo o posicionamento absoluto de um elemento
  5. Trabalhando com querystring e Javascript



2 Comentários »

  1. Comentário por maiza silva dos santos — 08/10/2008 @ 5:47 pm

    como baixa o pop up

  2. Comentário por Pedro — 28/04/2009 @ 6:40 pm

    Vlw cara, gostei meuito de ter encontrado seu Blog. Acaba de ganhar um lugar nos meus favoritos!
    Vc tem alguma dica pra eu aparecer nas perquisas do google? Já fiz tanta coisa e até agora só consigo aparecer com isso: gere lucro sem investimento. E não faço a minima ideia de como apareço por causa disso…
    Vlw, boa sorte

Rss dos comentários TrackBack URL

Deixe um comentário