Detalhes

Categoria: Webmaster

Atualização: Sábado, 27 Fevereiro 2010 11:10

Autor: vovó Vicki

Acessos: 18068

Como criar pop-ups

Usando o mesmo princípio de aproveitar links para abrir janelas especiais, podemos usar trechos de texto ou imagens para disparar eventos do tipo onclick ou onmouseover. Um link básico seria o seguinte:

Se quisermos que, quando o usuário clicar o texto do link seja apresentada uma janela especial na mesma página em que está com um texto da nossa escolha, adicionamos um evento ao link e, logo em seguida, criamos uma divisão que contém o texto que queremos apresentar.

Note que o link possui uma contentId que denominei "texto1". A divisão que contém o texto para este link também precisa ser identificada com o mesmo nome, ou seja, id="texto1". Dentro desta divisão há uma segunda, cuja classe é "highslide-body". É onde podemos colocar o texto do pop-up, inclusive com marcadores HTML (tipo negrito ou cor de fonte) e referências a imagens. É como se fosse uma página HTML dentro da página que está sendo mostrada.

Se você quiser acrescentar um botão para fechar o pop-up, faça o seguinte:

Clique aqui para ver o exemplo citado.

Fechar

Este é o texto que será mostrado no pop-up!

Experimente colocar o cursor do mouse na parte superior do pop-up. Quando o cursor mudar de forma, clique a arraste a janela pop-up para onde você quiser. Esta é mais uma das mordomias oferecidas pelo Highslide.

Conteúdo AJAX e iFrame

Agora observe o que acontece com isto: vou colocar a home page da Aldeia numa janela pop-up. Para isto, clique aqui.

Sei que não é nenhuma maravilha, mas serve para ilustrar o potencial do Highslide. Como fazer com que isto seja possível? Novamente é simples:

Agora, o mesmo exemplo com iFrame. Para testar, clique aqui.

O que foi que mudou? Veja a seguir:

Gente, é coisa pra dedéu! Divirtam-se com o Highslide e, se descobrirem mais alguma coisa, me avisem. Este script é realmente uma caixinha de surpresas.

Referências

• Highslide JS
• Tutoriais do Autor em inglês