Para pop-ups mais amigáveis

Este post fala sobre Pop-ups. Se quer só uma solução rápida, vá até o fim dele, pois vai ser longo! rs…

Lembra quando elas existiam somente para nos torrar a paciência, aparecendo nos momentos mais inconvenientes? As terríveis janelinhas usadas como propaganda em diversos portais e em outros sites já são fáceis de evitar. Os navegadores já têm funções pré-definidas para bloqueá-las e novas soluções - algumas mais irritantes ainda como animações em cima do conteúdo do site - são inventadas todos os dias.

Porém, as tais pop-ups ainda são úteis para algumas coisas.

Você sabe como funciona a janela pop-up?

É Javascript. Eu não sou programadora e não quero me aprofundar, mas vale dizer que se tem javascript no meio, pode não ser tão acessível assim. Temos que tomar cuidado com ele!

Dica infalível: façamos tudo que podemos com os recursos acessíveis (html/css). Dá para acessar o site? Agora sim, use Javascript/Flash/todasessasfirulas.

Quais podem ser os problemas de um link pop-up mal feito?

O primeiro e mais óbvio é que se uma pessoa tem o javascript do seu Browser desabilitado o velho truque abaixo não vai funcionar:

<a href="JavaScript:
raw_popup('http://exemplo.com');
void(0)">Eu sou um link Pop Up!</a>

Sabe o que esse código diz? “Oi, eu sou um link, quando você me clicar eu vou executar aquela ação Javascript!”.

Dá para imaginar o que acontece se o usuário não tem Javascript habilitado, não é mesmo?

O problema aí é que o link não está levando para a página desejada, e sim para uma ação! Se o JS está desabilitado, pára por aí, não entende a ação. Blé.

Problema não tão óbvio, mas existente

E se o usuário é dono de si e não acha que você deve mandar no que ele faz na web?

Já pensou que talvez ele já queira abrir aquele link em uma nova janela, mesmo sem saber que você planejou este destino para ele?

Eu sou assim. Quando vejo um link eu mesma decido se quero em uma nova janela/aba! Não me interessa se o desenvolvedor se preocupou em colocar um “target:_blank”. Na dúvida, lá vou eu clicar com o botãozinho do meio do mouse (ou ao lado, whatever).

O que acontece aqui? O browser fica maluco, chama uma página que é uma função, essa função se perde no meio da página que acabou de ser aberta e voilá: NADA!

NADA

Você vai notar que todos os problemas nascem de um único detalhe: o link não está direcionado para a página de destino, e sim para uma ação do Javascript.

Dê ao HTML o que é do HTML

<a href="http://exemplo.com"
target="_blank" onclick="link_popup(this);
return false">Eu sou um link Pop Up!</a>

O que o HTML pode fazer, deixe para ele fazer.

- O HTML sabe abrir links? Sabe sim: HREF.

- O HTML sabe abrir links em nova janela? É claro! TARGET=_BLANK

- O HTML sabe configurar as “frecuras” dessa nova janela, como tamanho, menus, barra de rolagem? Não =( É aí que entra o Javascript. Só aí.

Calma lá

Está vendo o código acima? Ele já resolve seus problemas de acessibilidade! O atributo “href” diz realmente para onde você quer ir: a página em questão. O atributo “target” diz que é em uma nova janela. Yeah!

Agora mesmo se o usuário não tiver o JS habilitado, vai conseguir abrir a página, e em uma nova janela. O mesmo acontece para apressadinhos como eu, que vão ver a página abrir-se linda na sua nova tab.

Mas e o objetivo final, que é deixar a janela “daquele jeitinho” que você quer, sem barras de rolagem, menu de opções, tamanho x… cadê?

Aí que entra o pulo do gato!

E que venham as pop-ups!

Agora é só atribuir as opções propriamente ditas do Javascript ao seu link! Como já disse neste post não pretendo ficar falando sobre códigos, não sou programadora e nem tenho tanto conhecimento para tanto, por isso só vou disponibilizar os arquivos criados por Caio Chassot (inclusive foi um post dele que inspirou este aqui) e você se vira, ok? São bem auto-explicativos.

Deixa de ser preguiçoso! :P

Baixa aí, veja os exemplos, suba os arquivos para o servidor e mude o que for necessário. Chega de moleza né?

Clique aqui para baixar