Créer une "Popup" modale || HTML/CSS/Vanille JS

Jan 27 2023

De nos jours, il est difficile de naviguer sur Internet sans tomber sur une page Web qui utilise une sorte de fonction "popup", que ce soit en cliquant sur connexion et un formulaire apparaît comme par magie au premier plan ou en sélectionnant une image pour obtenir une vue plus grande. Alors que je travaillais sur l'un de mes premiers projets de développement Web (un simple générateur de repas/recettes utilisant les données de l'API publique themealDB.com ), j'ai pensé que ce type de méthode serait le moyen idéal pour afficher des informations détaillées sur les recettes en fonction de la sélection repas! Et c'est ainsi qu'a commencé mon parcours de construction de ce "popup", que je sais maintenant est officiellement appelé un modal .

Produit fini!

Paramétrer le HTML

Dans mon cas, la configuration d'un conteneur pour le modal dans mon fichier HTML était assez simple car JavaScript a fait le gros du travail pour remplir les informations. Un simple élément <div> avec un attribut class suffira pour commencer :

<div class="meal-container">

</div>

Comme je l'ai mentionné, JavaScript est l'un des vrais héros de cette histoire. En utilisant la manipulation DOM pour créer, personnaliser et ajouter toutes les informations nécessaires à ma carte de recette, j'ai pu afficher toutes les informations importantes pour l'utilisateur avec l'objet de repas spécifique extrait de l'API (titre/image/ingrédients/ instructions):

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);
}

Styliser le modal avec CSS

Enfin et surtout, il était temps de prendre toutes les informations brutes et de les faire occuper le modal popup ! La première étape consistait à créer une carte vide en utilisant le <div> que j'avais configuré.

.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;
}

Cela a été rendu possible dans le JavaScript où l'écouteur d'événement a appliqué un style supplémentaire à l'arrière-plan pour créer un effet flou ainsi que l'application d'une nouvelle classe au modal pour l'animer dans la vue. Le nouveau style a pris soin d'ajuster la visibilité ainsi que d'appliquer la transformation :