Código javascript para Janelas pop-up abrir manualmente com clique ou automaticamente ao passar o mouse ou clicar

Bem, anteriormente já havíamos postado algumas dicas sobre as janelas pop-ups em blogs, mas agora tudo vai junto com algumas dicas novas e está mais fácil de acompanhar.



Os pop-ups são estas janelinhas que aparecem automaticamente quando você entra em algum site (se você estiver com o bloqueador de pop-ups desativado) e também ao ser clicados alguns tipos de link. Aqui vamos mostrar os três tipos de pop-up principais.

---

n° 1 - Modo automático simples



Descrição: Este é o modo simples de pop-up que aparece tão logo carrega o blog em que ele está instalado (automaticamente). Se você tiver o bloqueador de pop-ups ativado eles não funcionarão em seu computador.



Código:




<script language="javascript">window.open('http://url_da_página_pop-up','Info','width=200,height=250,scrollbars=no,resizable=no,status=no,left=100,top=47');


</script>



Modificações no código:



Todos os trechos mostrados em verde no código podem ser modificados de acordo com a sua vontade. Modifique http://url_da_página_pop-up pelo endereço completo da página que deverá abrir como pop-up. Modifique 200 de width=200 pelo tamanho da largura da página e 250 de height=250 pela altura. resizable=no define se a janela será redimensionável. Caso deseje permitir isto, modifique no por yes. Modifique o no de scrollbars=no para yes caso você queira que a janela tenha barras de navegação.






Como adicionar:



Após acessar o painel de sua conta no blogger, vá para a página Layout -- Elementos de página. Selecione Adicionar um gadget e na janela com as opções de gadgets que aparecerá escolha HTML/Javascript. A seguir, cole o código do pop-up no gadget e, após modificar os campos desejados, salve o gadget e visualize o blog. Este código também pode ser adicionado em uma postagem qualquer.






n° 2 - Modo automático avançado



Descrição: Praticamente o mesmo pop-up anterior, porém desta vez o código contém um sistema de cookies que impede que o pop-up abra mais de uma vez na mesma janela. Após ter aparecido uma vez você poderá atualizar a página quantas vezes quiser que o pop-up não será ativado novamente.



Código:



<script>




function openpopup(){

var popurl="http://url_da_página_pop-up"

winpops=window.open(popurl,"","width=200,height=250,")

}

function get_cookie(Name) {


var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

onset = document.cookie.indexOf(search)

if (onset != -1) {

onset += search.length

end = document.cookie.indexOn(";", onset);

if (end == -1)


end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(onset, end))

}

}

return returnvalue;

}

function loadornot(){

if (get_cookie('poppedup')==''){

openpopup()


document.cookie="poppedup=yes"

}

}

loadornot()

</script>



Modificações no código:



Modifique http://url_da_página_pop-up pelo endereço da página que abrirá em pop-up. Modifique o 200 de width=200 para o tamanho da largura da janela e 250 de height=250 para a altura.




Como adicionar: Siga os mesmos passos do modo anterior.







n° 3 - Modo OnClick

Descrição: A janela a ser aberta é exatamente como a do n° 1, porém ativa-se ao ser clicado um link. Alguns bloqueadores de pop-ups não funcionam com janelas clicadas.




Código:



<a onclick="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>






Modificações no código: As modificações no código também são como as do exemplo n° 1, exceto pelo trecho Texto do link, que você modificará para o texto do link que abrirá a janela. javascript:void(0) é o que aparecerá na barra de status. Não haverá diferença prática modificando-se este último trecho.

Como adicionar: Esta forma de pop-up pode ser adicionada na barra lateral (seguindo-se os passos do exemplo n° 1) ou numa postagem qualquer.








n° 4 Modo OnMouseOver



Descrição: Este modo é quase exatamente igual ao n° 3, sendo que a única diferença é que ele é ativado ao passar-se o mouse sobre o link (onMouseOver), e não ao ser clicado, como no exemplo anterior.



Código:





<a onmouseover="window.open('http://url_da_página_pop-up','Info','status=yes,scrollbars=yes,resizable=yes,width=200,height=250,left=100,top=47');" href="javascript:void(0)">Texto do link</a>






Modificações no código: Modifique tudo como no exemplo n° 3.



Como adicionar: Também este código pode ser adicionado como no n° 3

---

E aí você tem os principais modos de pop-up. No entanto, quanto ao pop-up automático, lembre-se de não exagerar com isso porque se usado demasiadamente pode incomodar seus visitantes e fazê-los fechar o blog o quanto antes. Também o modo onMouseOver pode ser muito irritante, por isso tome cuidado na sua utilização.