Artigos HTML e CSS Popup com jQuery: utilizando o plugin Reveal

No desenvolvimento de aplicações, independente de tipo ou plataforma, é comum a necessidade de, em algum momento, apresentar mensagens para o usuário, sejam apenas informativas ou indicando um erro que tenha ocorrido.

Em páginas web, estamos acostumados com a famosa função alert, que exibe uma mensagem de texto na tela e conta apenas com uma aparência padrão (mas que pode variar entre os browsers). Essa não deixa de ser uma função eficiente, pela sua simplicidade e compatibilidade com todos os principais browsers, por ser uma função nativa da linguagem JavaScript. Porém, quando buscamos uma interface mais elegante, a função alert deixa um pouco a desejar. Como exemplo, vejamos como é apresentada a mensagem com a função alert no Internet Explorer 9 (Figura 1).

Aparência do alert no browser Internet Explorer 9

Figura 1: Aparência do alert no browser Internet Explorer 9

Quando precisamos melhorar a aparência dessas mensagens, precisamos optar por aplicar formatações CSS, por exemplo, mas a mensagem exibida pela função alert não pode ser customizada a este ponto, o que nos faz recorrer a funções customizadas ou plug-ins de terceiros (que existem aos montes disponíveis gratuitamente).

Neste artigo veremos uma opção de plugin bastante eficiente, chamado Reveal, que pode ser obtido gratuitamente no link http://zurb.com/playground/reveal-modal-plugin e nos permite criar janelas modais (popups) com interface elegante e efeitos de animação.

Obtendo o plugin

Para utilizar o Reveal, primeiramente é necessário acessar o endereço http://zurb.com/playground/reveal-modal-plugin e clicar na opção “Download the Reveal kit” no lado direito da tela, como mostra a Figura 2.

Download do plugin Reveal

Figura 2: Download do plugin Reveal

Ao clicar no botão indicado será feito o download do arquivo “reveal.zip”, que contém todos os arquivos necessários para a utilização do plugin, bem como um arquivo html com demonstrações de uso do mesmo.

Devemos salvar este arquivo em uma pasta qualquer e extrair seu conteúdo. Junto com os arquivos JS, CSS e uma imagem do plugin, vem um arquivo da versão 1.4.4 da biblioteca jQuery, necessária ao funcionamento do Reveal.

Utilizando o Reveal

Tendo feito o download do plugin e extraído os arquivos necessários, podemos criar um arquivo com extensão html para testar suas funcionalidades.

No cabeçalho deste arquivo (tag <head>), é precisamos referenciar os arquivos CSS e JavaScript do plugin e da jQuery (podemos usar o arquivo jquery-1.4.4.min.js que vem com o plugin ou utilizar a versão online mais atual), conforme vemos na Listagem 1.

Listagem 1: Referenciando os arquivos do plugin

<meta charset="utf-8" />
<title>Popup com o plugin Reveal</title>

<!-- CSS do plugin -->
<link rel="stylesheet" href="reveal.css">
<!-- Biblioteca jQuery -->
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<!-- JS do plugin -->
<script type="text/javascript" src="jquery.reveal.js"></script>

Com os arquivos importados, o próximo passo é criar a mensagem em si. A janela modal é criada a partir de um elemento HTML, neste caso, uma div ao qual precisamos atribuir um id e a classe CSS “reveal-modal”.

Dentro dessa div, podemos inserir o conteúdo da mensagem, como título e texto, além de um botão responsável por fechar a janela, que é feito a partir de uma tag âncora (<a>) com a classe “close-reveal-modal”.

Abaixo, na Listagem 2 vemos a sintaxe completa do elemento div que irá representar a janela modal.

Listagem 2: Div que representará a janela modal

<div id="janelaModal" class="reveal-modal">
	<h1>Título da janela</h1>
	<p>Conteúdo da mensagem.</p>
	<a class="close-reveal-modal">×</a>
</div>

Se abrirmos o documento no browser, veremos que a div não está visível, pois ela só será exibida na forma de popup quando a função do plugin for invocada para isso.

Por fim, basta agora exibir o popup para ver o plugin funcionando. Isso pode ser feito de duas formas: utilizando o atributo data-reveal-id no elemento que irá abrir a janela ou via jQuery.

Vejamos inicialmente a primeira forma, que consiste em atribuir o id da div que criamos ao atributo (data-attribute) data-reveal-id de um outro elemento (âncora) que será o responsável por exibir o popup. Na Listagem 3 vemos a sintaxe de uso em uma tag âncora que irá abrir a div janelaModal utilizando o Reveal.

Listagem 3: Exibindo a janela modal a partir de uma tag âncora

<a href="#" data-reveal-id="janelaModal">
	Mostrar mensagem
</a>

Se abrirmos agora o documento no browser e clicarmos no link “Mostrar mensagem”, veremos o popup exibido, conforme ilustra a Figura 3.

Popup aberto a partir de um link

Figura 3: Popup aberto a partir de um link

A segunda forma consiste em inserir um trecho de código JavaScript/jQuery pra chamar a função reveal. Para ilustrar esse método, podemos inserir um botão no corpo do documento e tratar seu evento click.

Na Listagem 4 temos um exemplo de botão que pode ser inserido em qualquer ponto no body da página.

Listagem 4: Botão para exibir o popup

<button id="botaoMensagem">Exibir mensagem popup</button>

Agora podemos inserir o seguinte trecho de código JavaScript no head da página.

Listagem 5: Tratando o evento onclick do botão

<script type="text/javascript">
$(function(){
	$("#botaoMensagem").click(function(){
		$("#janelaModal").reveal();
	});
})
</script>

Com isso, clicar no botão, a função reveal será chamada a partir da div janelaModal, surtindo o mesmo efeito que vimos na Figura 3.

Conclusão

Esse tipo de plugin garante às nossas aplicações web um visual diferenciado, fugindo um pouco do padrão do qual os usuário já estão casnsados. E considerando o cenário atual onde a aparência dos softwares tem se mostrado um fator decisivo para o usuário final, é fácil perceber a importância desse tipo de ferramenta no dia a dia do desenvolvedor.

No site do plugin é possível encontrar maiores informações sobre seu uso, como parâmetros que permitem customizar a animação com a qual a janela modal é apresentada na tela, o tempo de duração desta animação e se o popup pode ou não ser fechado ao clicar fora dele.