Abrir uma nova janela nativa com JS dentro de um href. (tipo PopUp)

Para abrir uma nova janela (ou aba) em JavaScript usando o atributo href e definindo seu tamanho e scroll oculto, você pode usar o seguinte código:

<a href="#" onclick="window.open('https://www.exemplo.com', 'janela', 'width=500,height=500,scrollbars=0'); return false;">Abrir janela</a>

Explicação:

• O atributo href é definido como # para que o link não redirecione para uma nova página;
• O evento onclick é adicionado ao link, que chama a função window.open();
• A função window.open() recebe três argumentos: a URL que deve ser aberta, o nome da janela e as configurações da janela;
• As configurações da janela são passadas como uma string no formato 'nome=valor,nome=valor,...'. Neste caso, são definidos os valores de width (largura), height (altura) e scrollbars (scrollbars = 0 significa que o scroll será ocultado);
• O comando return false; é adicionado para que o link não execute sua função padrão (redirecionar para uma nova página).

Nota: Observe que o bloqueio de pop-ups pode impedir que a janela seja aberta em alguns navegadores.

Há várias opções que você pode adicionar para personalizar ainda mais a janela aberta. Aqui estão algumas ideias:

• top e left: você pode definir a posição inicial da janela na tela usando os valores top e left. Por exemplo: 'top=100,left=100,width=500,height=500,scrollbars=0'.
• resizable: você pode permitir ou proibir que a janela seja redimensionada pelo usuário usando o valor resizable. Por exemplo: 'width=500,height=500,resizable=no,scrollbars=0'.
• toolbar, location, directories, status, menubar: você pode controlar a exibição das barras de ferramentas do navegador na janela usando os valores toolbar, location, directories, status e menubar. Por exemplo: 'width=500,height=500,toolbar=no,location=no,scrollbars=0'.
• fullscreen: você pode abrir a janela em modo de tela cheia usando o valor fullscreen. Por exemplo: 'fullscreen=yes'.

Lembre-se de que nem todas as opções são suportadas por todos os navegadores, portanto, verifique a documentação do navegador para garantir a compatibilidade com as opções que você deseja usar.

Um exemplo legal, é de centralizar a janela na tela, você pode usar as propriedades top e left com valores calculados a partir das dimensões da janela e as dimensões da tela. Aqui está um exemplo de como centralizar a janela vertical e horizontalmente:

<a href="#" onclick="openWindow(); return false;">Abrir janela</a>

<script>
function openWindow() {
  var width = 500;
  var height = 500;
  var left = (window.screen.width / 2) - (width / 2);
  var top = (window.screen.height / 2) - (height / 2);
  var options = 'top=' + top + ',left=' + left + ',width=' + width + ',height=' + height + ',scrollbars=0';
  window.open('https://www.exemplo.com', 'janela', options);
}
</script>

Explicação:

• O link HTML chama a função openWindow() quando clicado;
• A função openWindow() define a largura e altura da janela (500×500 pixels neste exemplo);
• Em seguida, ele calcula as coordenadas de left e top para centralizar a janela na tela usando as dimensões da tela e da janela;
• Finalmente, ele define as opções da janela, incluindo as coordenadas de top e left, e abre a janela usando window.open().

Note que, neste exemplo, a função openWindow() é definida separadamente do link HTML, mas poderia ser incluída diretamente no atributo onclick do link.