Como abrir imagem em pop-up em JavaScript

Exibir imagens em pop-up é uma ótima maneira de melhorar a experiência do usuário, permitindo que ele visualize uma imagem em um tamanho maior sem sair da página. Neste tutorial, vamos aprender Como abrir imagem em pop-up em JavaScript.

1. Estrutura HTML básica

Primeiro, vamos criar uma estrutura básica em HTML com uma imagem de exemplo. Cada imagem terá um id único para podermos identificá-la no JavaScript.

<div class="galeria">
    <img src="exemplo.jpg" id="imagem1" alt="Imagem de exemplo" onclick="abrirImagem(this)">
</div>

<!-- Pop-up Container -->
<div id="popup" class="popup" onclick="fecharPopup()">
    <img id="imagemPopup" class="popup-imagem">
</div>

Neste código:

A imagem tem um onclick="abrirImagem(this)" para chamar a função JavaScript quando for clicada;
O contêiner popup é onde a imagem será exibida no pop-up. Ele possui um onclick="fecharPopup()" para fechar o pop-up ao clicar fora da imagem.

2. Estilizando o pop-up com CSS

Vamos adicionar o estilo CSS para que o pop-up cubra toda a tela e centralize a imagem.

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.popup-imagem {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

O .popup cobre a tela inteira e centraliza o conteúdo com justify-content e align-items. A imagem .popup-imagem tem um limite de tamanho para se ajustar à tela.

3. Função JavaScript para abrir e fechar o pop-up

Agora, vamos ao JavaScript para abrir a imagem em pop-up. Quando o usuário clica na imagem, a função abrirImagem() será executada. Para fechar o pop-up, basta clicar fora da imagem, chamando a função fecharPopup().

function abrirImagem(imagem) {
    const popup = document.getElementById("popup");
    const imagemPopup = document.getElementById("imagemPopup");

    imagemPopup.src = imagem.src; // Define a fonte da imagem do pop-up como a imagem clicada
    popup.style.display = "flex"; // Mostra o pop-up
}

function fecharPopup() {
    const popup = document.getElementById("popup");
    popup.style.display = "none"; // Esconde o pop-up
}

Código completo

Veja o código completo para abrir a imagem em pop-up:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagem em Pop-up</title>
    <style>
        .galeria img {
            cursor: pointer;
            width: 150px;
            margin: 10px;
            transition: transform 0.3s;
        }

        .galeria img:hover {
            transform: scale(1.1);
        }

        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        .popup-imagem {
            max-width: 90%;
            max-height: 90%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="galeria">
        <img src="exemplo.jpg" id="imagem1" alt="Imagem de exemplo" onclick="abrirImagem(this)">
    </div>

    <div id="popup" class="popup" onclick="fecharPopup()">
        <img id="imagemPopup" class="popup-imagem">
    </div>

    <script>
        function abrirImagem(imagem) {
            const popup = document.getElementById("popup");
            const imagemPopup = document.getElementById("imagemPopup");

            imagemPopup.src = imagem.src;
            popup.style.display = "flex";
        }

        function fecharPopup() {
            const popup = document.getElementById("popup");
            popup.style.display = "none";
        }
    </script>
</body>
</html>

Outro exemplo prático

Como abrir janelas pop-up normal e modal (travado):

Janela pop-up normal:

<script type="text/javascript">

function abrirJanela(pagina, largura, altura) { // Definindo centro da tela 
	
  var esquerda = (screen.width - largura)/2; 
  var topo = (screen.height - altura)/2; // Abre a nova janela 
  minhaJanela = window.open(pagina,'','height=' + altura + ', width=' + largura + ', top=' + 
  topo + ', left=' + esquerda); 
} 

 </script>

Link para abrir a janela pop-up:

<a href="#" onclick="javascript:abrirJanela('imagem.jpg', 1024, 768);">Clique aqui</a>

Janela pop-up modal:

Janelas de diálogo do tipo “modal” bloqueia qualquer interação na janela principal, até que o diálogo seja encerrado:

 <script>
  function openModal(pUrl, pWidth, pHeight) {
				   
   if (window.showModalDialog) {
    return window.showModalDialog(pUrl, window,"dialogWidth:" + pWidth + "px;dialogHeight:" 
    + pHeight + "px");
   } else {
   try {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
    window.open(pUrl, "wndModal", "width=" + pWidth + ",height=" + pHeight + ",
    resizable=no,modal=yes");
    return true;
   }
   catch (e) {
   alert("Script não confiável; não foi possível abrir a janela de diálogo modal.");
   return false;
   }
  }
 }
 </script>

Botão para abrir a janela pop-up:

<input type="button" onclick="openModal('window_modal_popup.html', 500, 450)" value="Abrir janela modal" />

Este código oferece uma maneira rápida e elegante de exibir imagens em pop-up. Ele é uma ótima opção para quem deseja destacar imagens sem sobrecarregar o layout.

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

Dúvidas ou sugestões sobre como abrir imagem em pop-up em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?

Como abrir imagem em pop-up em JavaScript

Receba grátis o e-book Como Formatar um PC em 5 Minutos

Deixe um comentário Cancelar resposta