Criar pop up em Javascript Fácil

Pop-up é uma janela adicional do navegador aberta a partir de uma página web. Abrir uma janela de pop up é uma maneira de permitir que os usuários de um site vejam informações adicionais sem sair da página. Ao criar um pop up com JavaScript você pode especificar as dimensões do pop up, posição e se as barras de ferramenta do browser estarão visíveis ou não na janela recém-criada.

Existem várias formas de abrir uma janela de pop up . Ela pode ser aberta quando o usuário entra em um website, clica no link ou quando sai de uma página. Abaixo você encontrará vários códigos de pop up prontos em javascript para você usar usar, além de tutoriais ensinando como modificar e adicionar pop up ao seu site.

Pop up que abre ao clicar no link

Esta é a maneira mais fácil de criar uma janela de pop up no javascript. Primeiro você precisa criar um documento em html que apresentará o conteúdo a a ser exibido no popup. Você também pode apontar para outro site como no exemplo. Copie e cole o código abaixo no html de sua página e não se esqueça de substituir a url. Clique para exemplo

<a href=”http://www.urldoseusite.com/conteudo-a-ser-exibido.html” onclick=”window.open(‘http://www.urldoseusite.com/conteudo-a-ser-exibido.html’,’popup’,’width=300,height=300,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0′); return false”>Testar</a>

Pop up que abre ao entrar no site

Este tipo de pop-up é mais complicado e exige dois blocos de código em javascript. O script abaixo deve ser colocado entre as tags <head> </head> da sua página html.

<script language=”javascript”>
<!– begin

function popup(Site)
{
window.open(Site,’PopupName’,’toolbar=no,location=no,scrollbars=yes,width=275,height=200′)
}

// end –>
</script>

O próximo código deve ser colocado diretamente na tag <body> da página, desta forma: <BODY
onLoad=”popup(‘http://www.urldosite.com’)”>

onLoad=”popup(‘http://www.urldosite.com’)”

Modificando os atributos do pop up

Essas são as opções que você pode definir na sua janela de pop up. São os atributos do pop up e com eles é possível modificar o tamanho da janela, se vai aparecer barra de ferramentas do navegador, etc

  1. width – define a largura em pixels do pop up
  2. height – define a altura em pixels
  3. directories – exibe ou não a barra de links no pop up
  4. resizable – se a janela do pop up pode ser redimensionada
  5. menubar – exibe ou não a barra de
  6. toolbar – exibe ou não a barra de ferramentas
  7. scrollbars – exibe ou não a barra de rolagem
  8. location – exibe ou não a barra de endereço

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *