Erstellen eines modalen „Popups“ || HTML/CSS/Vanilla JS

Jan 27 2023

Heutzutage ist es schwierig, im Internet zu surfen, ohne auf eine Webseite zu stoßen, die eine Art „Popup“-Funktion verwendet, sei es, dass man auf „Anmelden“ klickt und auf magische Weise ein Formular im Vordergrund erscheint oder ein Bild auswählt, um eine größere Ansicht zu erhalten. Als ich an einem meiner ersten Webentwicklungsprojekte arbeitete (einem einfachen Essens-/Rezeptgenerator, der Daten aus der öffentlichen API themealDB.com nutzt ), dachte ich, dass diese Art von Methode die perfekte Möglichkeit wäre, detaillierte Rezeptinformationen basierend auf den ausgewählten anzuzeigen Mahlzeit! Und so begann meine Reise zum Aufbau dieses „Popups“, von dem ich jetzt weiß, dass es offiziell als modal bezeichnet wird .

Fertiges Produkt!

Einrichten des HTML

In meinem Fall war das Einrichten eines Containers für das Modal in meiner HTML-Datei recht einfach, da JavaScript die schwere Arbeit übernahm, um die Informationen tatsächlich aufzufüllen. Für den Anfang genügt ein einfaches <div>-Element mit einem Klassenattribut:

<div class="meal-container">

</div>

Wie ich bereits erwähnt habe, ist JavaScript einer der wahren Helden in dieser Geschichte. Durch die Verwendung der DOM-Manipulation zum Erstellen, Anpassen und Anhängen aller erforderlichen Informationen an meine Rezeptkarte konnte ich dem Benutzer alle wichtigen Informationen mit dem spezifischen Mahlzeitobjekt anzeigen, das von der API abgerufen wurde (Titel/Bild/Zutaten/ Anweisungen):

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

Modal mit CSS gestalten

Zu guter Letzt war es an der Zeit, alle Rohinformationen im Popup-Modal zu platzieren! Der erste Schritt bestand darin, eine leere Karte mit dem von mir eingerichteten <div> zu erstellen.

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

Dies wurde innerhalb von JavaScript ermöglicht, indem der Ereignis-Listener zusätzliche Stile auf den Hintergrund anwendete, um einen unscharfen Effekt zu erzeugen, und außerdem eine neue Klasse auf das Modal anwendete, um es in die Ansicht zu animieren. Der neue Stil sorgte für die Anpassung der Sichtbarkeit und die Anwendung der Transformation: