Pop-ups DHTML – OpenPopups

Sistema Javascript para criar pop-ups DHTML, por meio de camadas, que não se podem bloquear pelos sistemas de bloqueio de pop-ups.

Todos nós já sabemos que a maioria dos navegadores dispõe de sistemas para bloquear os incômodos pop-ups, e quando estes não os bloqueiam, existem barras de navegação, como a de Google, que também bloqueia a apresentação de pop-ups. A maioria das vezes, estes pop-ups são muito incômodos e temos que comemorar porque agora a maioria se pode detectar e não permitir sua abertura, porém muitos de nossos sites utilizam este sistema para mostrar informação legítima que nossos visitantes deveriam conhecer.

De qualquer forma, existem métodos para mostrar pop-ups que possam ser mais complicados de bloquear, como os pop-ups DHTML, que são uma emulação das janelas secundárias, porém que funciona por camadas e HTML dinâmico para mostrar ou ocultar seu conteúdo. Este tipo de pop-ups não se considera como janelas secundárias, por isso não se bloqueiam.

Somente os navegadores que tenham Javascript desabilitado deixarão de mostrar estes pop-ups. Lembremos que depende de como esteja configurado Internet Explorer, às vezes te mostra uma mensagem de alerta quando se intenta executar um script em Javascript. O usuário é o responsável de permitir, ou não, executar scripts na página. Por isso, não é tão raro que inclusive os pop-ups DHTML se possam bloquear, mas pelo menos significam um avance com respeito às janelas secundárias habituais.

OpenPopups

Todo o anterior serve para apresentar um script Javascript Open Source (gratuito e de código livre) para criar Pop-ups DHTML. Vale a pena conhecer este script, porque certamente pode ser muito interessante para nossas páginas web.

A web onde se pode baixar o sistema de pop-ups DHTML é: http://www.openwebware.com/products/openpopups/

Desde tal web se podem baixar os arquivos necessários para a instalação do sistema de pop-ups e algum código de exemplo. De qualquer forma, explicaremos aqui em português, para que todos possam entender.

Referência: Em CriarWeb.com publicamos alguns outros artigos sobre como fazer um pop-up DHTML, porém utilizando a biblioteca Cross-Browser. Pode ser de interessante leitura para quem quiser se aprofundar no tema ou encontrar outras possibilidades para realizar pop-ups DHTML. Está em nosso manual de Workshop de Cross-Browser DHTML.

Tem-se que descompactar os arquivos que se baixam da web, mantendo a mesma estrutura de diretórios.

Uma vez estando descompactados, em um diretório dentro de nosso web site, que chamaremos, por exemplo, "d_openpopups", já podemos acessá-los através de qualquer página para mostrar pop-ups DHTML. Para isso, o primeiro é incluir o Javascript com a biblioteca.

Onde "d_openpopups" deve ser o diretório onde descompactamos os arquivos. Tal como está escrita a rota para o script, se supõe que colocamos este diretório na raiz do diretório de publicação da web.

Logo, temos que adicionar um evento onload na etiqueta <body>, para ocultar os pop-ups ao carregar a página.

A função hideDiv() recebe o número de popups que vamos utilizar na página. Se tivermos um só pop-up DHTML chamaremos passando um 1 como parâmetro: hideDiv(1). Se tivermos 5 pop-ups DHTML, lhe passaremos um 5 como parâmetro: hideDiv(5).

A seguir, temos que criar as camadas com o código fonte dos pop-ups a mostrar. Algo como:

<div id="Div1">
Código do Popup
</div>

Há que observar que a camada tem como identificador (atributo id) "Div1". Isso é para o pop-up 1. Se tivéssemos outros pop-ups, deveríamos dar-lhes nomes com números consecutivos: Div2, Div3…

Para acabar, temos que fazer a chamada à função Javascript que deve mostrar o pop-up. Essa função se chama createWindow() e recebe vários parâmetros:

Título da janela
Largura da janela (a altura será a necessária para que caiba todo o conteúdo)
Cor de fundo da janela
O identificador da camada (só o número, 1, 2, 3…)
Se quisermos que se mostre o ícone para minimizar (1 para mostrá-lo e 0 se não quisermos que se mostre)
A posição "left" da janela (o número de pixels à esquerda da janela)
A posição "top" da janela (o número de pixels que deve ter acima da janela.

Por exemplo, uma chamada possível a esta função seria:

createWindow('Título', 300, '#ffff88', 1, 0, 100, 25);

Um detalhe que para nós fez falta mudar para que tudo funcionasse corretamente, embora não tenha visto explicado nada disto na documentação do produto, são os diretórios das imagens e as declarações de estilos que utilizam os pop-ups DHTML. Esses diretórios vêem especificados no arquivo de scripts javascript chamado openpopups.js.

Nas seguintes linhas do código se especificam os diretórios das imagens e os CSS:

// CSS Diretory
cssDir = "/d_styles/";

// Images Directory
imageDir = "images/";

À princípio, segundo entendo, não teria porquê tocar nessas linhas, porque não modifiquei a estrutura de diretórios do arquivo de download, porém se não as toca os exemplos não funcionam corretamente. Para que as rotas se encontrem, tive que colocar a estrutura de diretórios desde a raiz do domínio até as pastas onde estão os arquivos CSS e as imagens. Seria algo como isto:

// CSS Diretory
cssDir = "/d_openpopups/openpopups/styles/";

// Images Directory
imageDir = "/d_openpopups/openpopups/images/";

Código completo

Vamos mostrar o código de uma página que tem dois pop-ups DHTML e com um par de métodos de carregamento dos popups, um por meio do botão e outro por meio de um link.

<html>
<head>
    <title>Exemplo OpenPopups</title>
    <script language="JavaScript" type="text/javascript" src="/d_openpopups/openpopups/openpopups.js">
    </script>
</head>
<body onLoad="hideDiv(2);">
Esta página mostra um par de pop-ups DHTML.
<br>
<br>
Esperamos que sejam interessantes.
<form>
    <input type="button" value="Abrir Popup DHTML 1" onClick="createWindow('Ejemplo 1', 150, '#ffff88', 1, 1, 20, 40);">
</form>
<p>
Agora vejamos o exemplo 2, abertura com um link:
<a href="#" onClick="createWindow('Anuncio MercadoProfesional.com', 468, '#EEEEEE', 2, 0, 240, 165);">Abre o segundo popup</a>

<div id="Div1">
    <div style="border: 1px solid #ff8800; background-color: #FFFF88; padding: 5px;">
    <b>Aqui poderíamos colocar tanto texto quanto quisermos! E todo tipo de conteúdo HTML!
    </div>
    <ul>
    <li>Com listas</li>
    <li>Links</li>
    <li>Tabelas</li>
    <li>...</li>
    </ul>
</div>

<div id="Div2">
    <div align="center"><a href="http://www.mercadoprofesional.com" target="_blank"><img src="mp468.gif" width="468" height="60" border="0" alt="MercadoProfesional.com"></a></div>
</div>

</body>
</html>