Como criar links para janelas PopUp

Se você precisa criar um link para abrir uma janela PopUp, vai encontrar diversos tutoriais por ai. Algumas técnicas usam JavaScript e alterações no código fonte do template, quando não há necessidade disso tudo.

É bem simples, antes de mais nada você precisa criar e hospedar a página que pretende abrir dentro da janela PopUp. Anote a URL desta página e substitua nos dois campos destacados em vermelho no código abaixo:
<a href="URL_PAGINA_DA_POPUP" target="popupwindow" onclick='window.open("URL_DA_PAGINA_POPUP", "popupwindow", "scrollbars=yes,width=550,height=520");return true'>Link</a>
Nos campos em azul são definidos a largura e a altura da janela PopUp respectivamente e em verde é o texto que vai aparecer na página. Veja como fica o resultado:
Imagem: Gamleys Toys

Comentários

  1. Anônimo11/09/2008, 09:59

    Gostei! Já adicionei na postagem atual!

    *off-topic: Acho que ontem estava enxergando tudo cor de rosa, sorry!! :)

    ResponderExcluir
  2. Anônimo11/09/2008, 11:19

    Compulsivo eu nao entedi muito bem...tipo como q eu faço pra criar uma pagina dessas sem ser no Blogger???

    ResponderExcluir
  3. teste11/09/2008, 11:37

    @Choujitops, você pode criar uma página no Google Sites, num Fotolog, no Orkut... Pode colocar a página de destino que quiser dentro da janela PopUp...

    []'s
    Compulsivo

    ResponderExcluir
  4. Anônimo11/09/2008, 11:54

    Opa.. Gostei da dica.

    Off-topic: Como posso inserir esse BOX que tem em baixa do h4 (Faça seu comentário)...

    Gostaria de inserir em meu blog e não estou achando o local certo..

    Abraços,

    ResponderExcluir
  5. Anônimo11/09/2008, 12:06

    mas tipo eu coloquei uma pagina do orkut tb ai na hora que eu cliquie no link para fazer o teste ele nao abriu na Pop-up ele abriu como outra aba...

    Porque??

    ResponderExcluir
  6. GAMA11/09/2008, 20:06

    LOL, cara eu tava preparando iso agora mesmo com um java script ai vem voce com isso... vc e fods em ?

    :D

    awe quem não quiser criar uma conta nova em algum host pode usar o proprio blogger para fazer a pagina ^^

    exemplo:cria um blogger no modelo antigoe faz sua pagina lá ! :D

    brigadão ^~

    ResponderExcluir
  7. Anônimo25/09/2008, 10:40

    olá. estava procurando por janelas pop-up e caí aqui :)
    Mas tem como fazer com imagens? Tipo, ao invés do texto ficar uma imagem pequena e quando clicar nela abrir a imagem em tamanho maior?

    ResponderExcluir
  8. teste25/09/2008, 10:48

    @Christiane, é perfeitamente possível, veja um exemplo aqui: A Bunda mais perfeita da web

    []'s
    Compulsivo

    ResponderExcluir
  9. Anônimo25/09/2008, 11:12

    Obrigada pela resposta rápida.
    É exatamente isso que preciso!!!
    Então, como faço? É só colocar o mesmo link da imagem nos três campos (nos 2 vermelhos e no verde)?

    ResponderExcluir
  10. teste25/09/2008, 11:19

    No verde vai a miniatura...

    []'s
    Compulsivo

    P.S.: Para onde mando a conta, por esse atendimento personalizado?

    ResponderExcluir
  11. Anônimo25/09/2008, 12:03

    Bom, ainda não consegui fazer funcionar... Acho que nesse horário o meu cérebro ainda está em "stand by". Vou continuar tentando...

    Quanto à conta, pode enviar para a assessoria do Silvio Santos.

    Obrigada novamente.

    ;D

    ResponderExcluir
  12. Azulnauta13/12/2008, 20:48

    ja tinha este post nos meus favoritos desde que o recebi pelo google reader, mas só hoje experimentei o código no meu blog e...utilizei num post e resultou, depois utilizei o mesmo code na sidebar, para abrir as inscrições no feedburner por email em popup e já não resulta!! apenas resulta como se estivesse target_blanck !!

    é normal?

    ResponderExcluir
  13. teste13/12/2008, 22:35

    @Dav7, acho que não é normal não, pois como você pode perceber clicando no link localizado no rodapé deste post, continua tudo funcionando direitinho...

    []'s
    Compulsivo

    ResponderExcluir
  14. Anônimo11/01/2009, 17:37

    Boa a dica, só não entendi para que são necessários os atributos target="popupwindow" e href="...". Sempre uso o código assim:

    <a onclick="window.open('endereço_da_página','Info','status=yes,scrollbars=no,resizable=no,width=620,height=450,left=100,top=47');" href="javascript:void(0)">Link</A>

    Modificando os trechos acima mostrados em negrito, mas sem utilizar os dois atributos referidos.

    É só minha opinião... não se aborreça com meu comentário impertinente. ;)

    Abraço.

    ResponderExcluir
  15. teste11/01/2009, 17:46

    @MestreBlogger, Tenho impressão que dessa forma não funciona em todos os navegadores, pode confirmar?

    []'s
    Compulsivo

    ResponderExcluir
  16. GAMA16/01/2009, 18:17

    Crieo que não compulsivo pois

    onclick é java script

    se vc colocar o endereço no href ou no onclick tanto faz

    :D

    ResponderExcluir
  17. Administrador Goiaba05/09/2009, 17:50

    Espertinhos vocês em, mudaram logo o slogam!

    ResponderExcluir
  18. Pr Felipe da Hora20/11/2009, 04:30

    Valeuuuuuuuuuuuuuu
    Ó Glória!!!!!!!!!!!!!!!
    Passei por tudo que é de sugestões cheios de Javascript e não funcionava as janelas poup up!
    Obrigado pelas dicas!
    Deus lhe abençôe.

    ResponderExcluir
  19. Administrador15/05/2010, 22:10

    VLW PELO POST deu certo editei algumas coisa ae foi :D
    consegui fazer em vez de link por uma img com link abri em poop

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

Imagem
Apesar de ser ATEU (ou talvez justamente por isso), um dos meus sonhos de infância era ter a minha própria igreja, uma organização filantrópica sem fins lucrativos, visando meu enriquecimento ilícito, com pouco ou nenhum trabalho. Na época os nomes que me passavam pela cabeça para minha congregação seriam algo como: A Igreja Quadrangular do Triângulo Redondo, A Igreja da Verdade Compulsiva Suprema , ou até A Seita Xeque . E apesar deste sonho de criança ter ficando para trás, a idéia verdadeiramente nunca saiu da minha cabeça.
Continue lendo >>

Hospedar JavaScript no Blogger / Blogspot

Melhor que isso, só a hospedagem no 7 estrelas Burj Al Arab... OBS : Se você está procurando hospedagem grátis para arquivos externos, dê uma olhada neste post: Armazene, Sincronize e Compartilhe na Faixa Uma problema antigo que atormenta alguns usuários avançados do Blogspot é quanto a hospedagem externa de arquivos JavaScript . Como o Blogger não disponibiliza um abrigo para estes arquivos, muita gente acaba recorrendo a serviços gratuitos de terceiros para hospedar externamente estes códigos. Mas a hospedagem externa de arquivos JavaScript pode gerar alguns problemas para os usuários do Blogger. Caso o serviço onde seu arquivo JavaScript está hospedado apresentar alguma instabilidade, isto com certeza comprometerá o desempenho do seu site. Além disso, estes serviços externos podem ser descontinuados, como aconteceu com o Google Pages , ou sofrer alterações no seu funcionamento que acarretem perdas de funcionalidades e exijam revisões de código, como está acontecendo agora com Sk...
Continue lendo >>

Menu em abas no Blogspot + Template

Imagem
Este tutorial é um dos mais pedidos depois do lançamento do novo template compulsivo . Como já disse em comentários e no Grupo de Discussão Blogspot Brasil , me baseei no tutorial que está no Templates para Você , que usa o JavaScript criado por BarelyFitz Designs para exibir um menu em abas no Blogspot. Este não é um tutorial de difícil implementação, mas antes de começar vamos aos avisos paroquiais: Tente antes num blogue de testes; Faça um backup do seu template antes de começar; Leia o tutorial até o fim e tenha certeza de ter entendido, copiar e colar sem pensar não dá certo! Baixe este arquivo , hospede no local de sua preferência e anote a URL. Em seguida cole o código abaixo antes da tag </head> do seu template, alterando a localização do arquivo hospedado anteriormente: <!-- JavaScript Menu em Abas --> <script src=' http://URL_DO_ARQUIVO/tabber.js ' type='text/javascript'/> Depois, adicione o seguinte trecho de código CSS ao seu temp...
Continue lendo >>