Bom, não é uma janela emergente como tal, é mais como um simulacro, porém que faz às vezes de janela emergente e sem perigo de que o navegador bloqueie tal janela. É necessário ter conhecimentos (pelo menos básicos) de:

• HTML - podem ver a sessão de HTML de CriarWeb clicando Aqui.
• CSS - podem ver a sessão de CSS de CriarWeb clicando Aqui.
• JavaScript - podem ver a sessão de JavaScript de CriarWeb clicando Aqui.
• Para o exemplo deste artigo iremos utilizar imagens transparentes com diferentes níveis de opacidade, pelo qual é necessário que saiba utilizar um editor de imagens (photoshop, firework, ...) para criar as imagens transparentes ao seu gosto. No caso de que não tenha um editor de imagens, você pode utilizar as do exemplo sem nenhum problema.

Pode-se ver o exemplo em funcionamento Aqui, assim terá uma idéia mais clara do que vamos fazer. Todo o artigo se baseia na explicação do exemplo. O exemplo foi comprovado no Internet Explorer versão 6 e 7, e no Mozilla FireFox 2, e todos com resultados positivos.

Explicação do Exemplo:

Finalmente a parte boa deste artigo!!

A grosso modo, o corpo principal (body) do arquivo Html do exemplo, está composto por 3 parágrafos os quais têm a finalidade de encher a página, conseguindo assim que se veja carregada de informação. Ao final de cada parágrafo há um link o qual é o encarregado de mostrar a janela emergente através de código feito em JavaScript . Esta é a única diferença significativa entre os 3 parágrafos (a chamada à função JavaScript). O código do primeiro parágrafo é o seguinte:

<p>
Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
Este é o conteúdo do primeiro parágrafo, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla, bla.<br>
<a href="javascript:abrirJanela('1');">Simulacro de janela Emergente 1</a>
<p>

Uma vez que tiver visto os 3 parágrafos no código do exemplo, o que verá a seguir são 4 camadas (div) chamadas camadaJanela, camadaFundo1, camadaFundo2 e camadaFundo3. Apliquei a estas camadas código CSS e à princípio todas estão ocultas. A camada camadaJanela é a mais complexa de todas e é porque nela está o código do que chamei "janela emergente". O código é mais simples do que parece:

    Usei uma tabela principal para projetar uma "janelinha de informação" exata às do sistema operacional Windows XP, onde atribui a cada célula uma imagem, e na célula central, fiz outra tabela onde coloquei a mensagem da janelinha e o botão de Aceitar.

As outras camadas não têm absolutamente nada. Mais adiante veremos porque.

Com isto finalizo o que seria a explicação do corpo do Html. Antes de explicar os códigos que fiz em JavaScript, é importante conjecer a arquitetura da página, ou seja, a forma em que diagramei a página para conseguir o efeito desejado:


Usando CSS se pode dar um nível de profundidade às camadas. Isto é o que fiz!!! Apliquei o atributo z-index para colocar camadas em cima de outras. A camada que tiver um maior valor numérico para o atributo z-index, é a que se verá mais por cima de todas e as demais ficarão por baixo de acordo com o atributo z-index. Para o exemplo deste artigo, o corpo principal da página tem um z-index = 1, enquanto que as camadas chamadas camadaFundo1, camadaFundo2 e camadaFundo3 lhes atribui um valor de 2. À camada camadaJanela lhe atribui 3 porque é a que quero que fique por cima de todas as demais. Como disse anteriormente, todas as camadas inicialmente estão oculta (utiliza-se o atributo visibility com o valor hidden) e a idéia é aplicar JavaScript para mostrar tais camadas.

Nas 3 camadas centrais (camadaFundo1, ...fundo3), é onde radica o truque de que o corpo principal da janela fique desativado quando se mostre a janela emergente. Utilizando CSS faço com que estas camadas tenham o máximo de largura (width) que possam ter e uma altura (heigth) que coloquei a minha conveniência, de modo que cobrem todo o corpo principal. As camadas centrais se diferenciam pelas imagens que nelas se mostram. Todas têm imagens transparente com opacidades de 40%, 50% e 60% e diferentes filtros de transparência. Ao usar imagens com tendência (opacidade) ao transparente sobre o fundo da camada, a camada permite que se veja o que há por debaixo dela, neste caso, o corpo principal da página. É importante destacar, que se colocam uma imagem 100% transparente será equivalente a não colocar imagem, e o fundo se verá normal. A idéia é colocar uma imagem que não seja totalmente transparente, de modo que se veja a cor da imagem e conseguir assim que o fundo pareça inativo.

Há 2 funções JavaScript, as quais mostram e ocultam as camadas. O código da função que mostra as camadas é o seguinte:

function abrirJanela(janela)
{
    if (janela=="1")
   {
       document.getElementById("camadaFundo1").style.visibility="visible";
       document.getElementById("camadaFundo2").style.visibility="hidden";
       document.getElementById("camadaFundo3").style.visibility="hidden";
    }
    else if (janela=="2")
    {
       document.getElementById("camadaFundo1").style.visibility="hidden";
       document.getElementById("camadaFundo2").style.visibility="visible";
       document.getElementById("camadaFundo3").style.visibility="hidden";
    }
    else
    {
       document.getElementById("camadaFundo1").style.visibility="hidden";
       document.getElementById("camadaFundo2").style.visibility="hidden";
       document.getElementById("camadaFundo3").style.visibility="visible";
    }
    document.getElementById("camadaJanela").style.visibility="visible";
    document.formulario.bAceitar.focus();
}

Esta é a função que se executa cada vez que se clica em qualquer dos 3 links. Ao clicar no link localizado no primeiro parágrafo, este chama à função e lhe passa como parâmetro o número um (1), o qual indica o número do parágrafo. Ao clicar nos outros dois links, se passará como parâmetro 2 e 3 de acordo ao parágrafo. Dentro da função se obtém os estilos de cada camada e se utiliza a propriedade visibility para mostrar ou ocultar segundo seja o caso. Dentro desta função se dá o foco ao botão Aceitar.

Uma vez que se mostre a janelinha emergente, esta se pode tirar (ocultar) pressionando sobre o botão Aceitar ou sobre a X. Isto fará um chamado à função JavaScript respectiva:

function fecharJanela()
{
   document.getElementById("camadaFundo1").style.visibility="hidden";
    document.getElementById("camadaFundo2").style.visibility="hidden";
    document.getElementById("camadaFundo3").style.visibility="hidden";
    document.getElementById("camadaJanela").style.visibility="hidden";
    document.formulario.bAceitar.blur();
}

Esta função se explica por si mesma. Oculta todas as camadas e tira o foco ao botão Aceitar da janelinha. Com isto finalizo a explicação do artigo. Espero que lhe sirva e possa aplicá-lo em suas criações.

Pode-se ver o resultado final deste script em uma página à parte.