Criando um “Popup” Modal || HTML/CSS/Vanilla JS

Jan 27 2023

Hoje em dia, é difícil navegar na internet sem encontrar uma página da web que utiliza algum tipo de recurso “pop-up”, seja clicando em login e um formulário aparece magicamente em primeiro plano ou selecionando uma imagem para obter uma visão maior. Como eu estava trabalhando em um dos meus primeiros projetos de desenvolvimento web (um gerador simples de refeição/receita utilizando dados da API pública themealDB.com ), imaginei que esse tipo de método seria a maneira perfeita de exibir informações detalhadas da receita com base no selecionado refeição! E assim começou minha jornada de construção deste “pop-up”, que agora sei que é oficialmente chamado de modal .

Produto final!

Configurando o HTML

No meu caso, configurar um contêiner para o modal em meu arquivo HTML foi bastante simples, pois o JavaScript fez o trabalho pesado para realmente preencher as informações. Um simples elemento <div> com um atributo de classe serve para começar:

<div class="meal-container">

</div>

Como mencionei, o JavaScript é um dos verdadeiros heróis dessa história. Ao utilizar a manipulação do DOM para criar, personalizar e anexar todas as informações necessárias ao meu cartão de receita, consegui exibir todas as informações importantes para o usuário com o objeto de refeição específico que foi obtido da API (título/imagem/ingredientes/ instruções):

function renderMealCard(meal) {
    mealContainer.innerHTML = '';
    const img = document.createElement('img');
    const h2 = document.createElement('h2');
    const closeButton = document.createElement('img');
    const ul = document.createElement('ul');
    
    img.src = meal.strMealThumb;
    img.id = 'food-img';
    h2.textContent = meal.strMeal;
    
    closeButton.id = 'close';
    closeButton.src = './images/close.png';
    closeButton.addEventListener('click', () => {
        hideMealCard();
    });

    mealContainer.append(closeButton, h2, img, ul);

    for(let i = 1; i <= 20; i++) {
        if(meal[`strIngredient${i}`] === '' || meal[`strIngredient${i}`] === null)
            break;

        const li = document.createElement('li');
        li.textContent = `${meal[`strMeasure${i}`]}` + ` ` + `${meal[`strIngredient${i}`]}`
        ul.append(li);
    }

    let instructions = meal.strInstructions.split('\r\n');
    instructions = instructions.map(instruction => instruction.replace('\r\n', ''));
    
    for(let i = 0; i < instructions.length; i++) {
        const p = document.createElement('p');
        p.textContent = instructions[i];
        mealContainer.append(p);
    }

    const p = document.createElement('p');
    p.textContent = '.';
    p.style.opacity = '0';
    mealContainer.append(p);
}

Estilizando o modal com CSS

Por último, mas não menos importante, era hora de pegar todas as informações brutas e fazê-las ocupar o modal popup! O primeiro passo foi criar um cartão vazio usando o <div> que eu havia configurado.

.meal-container {
    width: 60%;
    background: rgb(235, 235, 235);
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0px 30px 30px 30px;
    color: #000;
    visibility: hidden;
    transition: transform 0.5s, top 0.5s;
}

Isso foi possível no JavaScript, onde o ouvinte de evento aplicou estilo adicional ao plano de fundo para criar um efeito desfocado, além de aplicar uma nova classe ao modal para animá-lo na exibição. O novo estilo cuidou de ajustar a visibilidade, bem como aplicar a transformação: