Neste tutorial vamos mostrar como criar uma janela pop up utilizando HTML e Javascript. Nosso objetivo é criar janelas pop up simples e que se abrem a partir de um clique em um link ou em um botão específico.

Veja abaixo as janelas pop up que iremos criar neste tutorial:

Definição janela pop-up

1. Pop-up é uma janela que abre no navegador ao visitar uma página web ou acessar um link específico. O pop-up é utilizada pelos criadores de sites para abrir alguma informação extra ou como meio de propaganda.

2. Neste artigo vamos criar pop-ups que se abrem a partir de um clique em um link ou em um botão específico. Desta forma, a janela se abrirá apenas quando for requerida pelo usuário.

HTML

1. Os links e botões que nos referimos acima podem ser criados a partir dos seguintes elementos HTML:

<button>Abrir</button>
<a onclick="#">Clique aqui</a>
<input type="submit"><br>
<a href="#">Clique aqui</a>

 Veja como ficam nossos elementos HTML sem estilos e funções JavaScript:

2. Vamos criar agora os eventos "on click" para os botões:

<button onclick="abrir('http://visualdicas.com.br')">Abrir</button>
<a href="javascript:abrir('http://www.visualdicas.com.br');">Clique aqui</a>
<input onclick="abrir2()" type="submit">
<a href="#" onclick="abrir2()">Clique aqui</a> 

JS

1. Para criarmos o evento "abrir janela" vamos definir como exemplo duas funções em JavaScript, que denominaremos de abrir() e abrir2(). Vamos utilizar também o método window.open() que abre uma nova janela no navegador, conforme os exemplos abaixo:

Exemplo 1 - função abrir() - abre janela do link definido no HTML

function abrir(URL) {
  window.open(URL, 'janela', 'width=795, height=590, top=100, left=699, 
scrollbars=no, status=no, toolbar=no, location=no, menubar=no, resizable=no, fullscreen=no')
}

Exemplo 2 - função abrir2() - abre janela com link fixo no JavaScript

function abrir2() {
  URL="http://uol.com.br";
  window.open(URL, 'janela', 'width=660, height=510, top=100, left=699, 
scrollbars=yes, status=no, toolbar=no, location=no, directories=no, menubar=no, 
resizable=no, fullscreen=no')
}

2. Para um melhor entendimento do script, mostraremos abaixo um resumo dos parâmetros do método window.open() que foram utilizados nos exemplos acima:

  Sintaxe:

         window.open (URL, 'name', 'especificações') - veja a referência completa aqui.

  Parâmetros:

  URL = (Opcional) Variável que especifica o endereço do website que se deseja abrir;

  name = (Opcional) Atribui um nome para a janela, que no nosso exemplo denominamos de 'janela' que deverá;

  especificações = (opcional) Devem ficar entre aspas e separadas por vírgulas, sendo:

  with = largura da janela em pixel,

  height = altura da janela em pixel,

RESULTADO FINAL

Veja os "pop-ups" finalizados:

See the Pen qOVPRE by Angelo Luis Ferreira (@angeloalf) on CodePen.

Obs.: Se desejar colocar estilos nos links e botões, leia: Criando botões personalizados - CSS

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foram criados nossos pop-ups. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Enviar Código" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<h3>Exemplo - abrir janela pop up</h3><br>

<button onclick="abrir('http://visualdicas.com.br')">Abrir</button>
<a href="javascript:abrir('http://www.visualdicas.com.br');">Clique aqui</a>
<input onclick="abrir2()" type="submit">
<a href="#" onclick="abrir2()">Clique aqui</a>

<br><br> 

 JavaScript

function abrir(URL) {
  window.open(URL, 'janela', 'width=795, height=590, top=100, left=699, 
scrollbars=no, status=no, toolbar=no, location=no, menubar=no, resizable=no, 
fullscreen=no')
}

function abrir2() {
  URL="https://uol.com.br";
  window.open(URL, 'janela', 'width=660, height=510, top=100, left=699, 
scrollbars=yes, status=no, toolbar=no, location=no, menubar=no, 
resizable=no, fullscreen=no')
}

 REFERÊNCIA JAVASCRIPT

1. [window.open()] >> Sintaxe e exemplos

COMENTÁRIOS