Javascript – Abrir pop-up centralizada

Algumas vezes precisamos que nossa aplicação abra uma janela pop-up com novas informações. Pra isso utilizamos o método window.open.

Mas e pra abrir essa janela de forma centralizada? Ficaria melhor hein. O código abaixo mostra como fazer isso. Claro que, alterando alguns parâmetros você pode fazer a janela abrir alinhada a esquerda, ou no topo da página, ou seja, manipular sua posição da maneira que desejar.

Vamos criar um método, e depois chamar passando alguns parâmetros.

/* Recebe parametros e centraliza os Pop Ups na tela */
function PopUpCentralizado(nomepagina, titulopagina, w, h, scroll) {
  var winl = (screen.width - w) / 2;
  var wint = (screen.height - h) / 2;
  winprops = 'height=' + h + ', width = ' + w + ', top = ' + wint + ', left = ' + winl + ', scrollbars = ' + scroll + ', location=no, status=no';
  win = window.open(nomepagina, titulopagina, winprops);
  if (parseInt(navigator.appVersion)  >= 4) {
      win.window.focus();
  }
}

E para chamar o método:

onClick="PopUpCentralizado('ajuda.html', 'tela de ajuda', '450', '250', 'no');"

Você deve saber que o onClick fica dentro de alguma tag como um botão, imagem ou link.

No exemplo acima citado, eu usei para abrir uma janela pop-up de ajuda quando o usuário clicar numa imagem de “ajuda” na tela, geralmente aquelas que possuem um ponto de interrogação. Use com imaginação.

Sucesso!