Membuat Modal “Popup” || HTML/CSS/Vanila JS

Saat ini, sulit untuk menjelajah internet tanpa menemukan halaman web yang menggunakan semacam fitur "popup", apakah itu mengklik login dan formulir muncul secara ajaib di latar depan atau memilih gambar untuk mendapatkan tampilan yang lebih besar. Saat saya sedang mengerjakan salah satu proyek pengembangan web pertama saya (generator makanan/resep sederhana yang memanfaatkan data dari API publik themealDB.com ), saya pikir jenis metode ini akan menjadi cara sempurna untuk menampilkan informasi resep terperinci berdasarkan pilihan makanan! Maka dimulailah perjalanan saya membangun "munculan" ini, yang sekarang saya tahu secara resmi disebut sebagai modal .

Menyiapkan HTML

Dalam kasus saya, menyiapkan wadah untuk modal dalam file HTML saya cukup sederhana karena JavaScript melakukan pekerjaan berat untuk benar-benar mengisi informasi. Elemen <div> sederhana dengan atribut class akan dilakukan untuk memulai:

<div class="meal-container">

</div>

Seperti yang saya sebutkan, JavaScript adalah salah satu pahlawan sebenarnya dalam cerita ini. Dengan memanfaatkan manipulasi DOM untuk membuat, menyesuaikan, dan menambahkan semua informasi yang diperlukan ke kartu resep saya, saya dapat menampilkan semua informasi penting kepada pengguna dengan objek makanan tertentu yang diambil dari API (judul/gambar/bahan/ instruksi):

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

Menata Modal dengan CSS

Last but not least, sudah waktunya untuk mengambil semua informasi mentah dan membuatnya menempati modal popup! Langkah pertama adalah membuat kartu kosong menggunakan <div> yang telah saya siapkan.

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

Ini dimungkinkan dalam JavaScript di mana pendengar acara menerapkan gaya tambahan ke latar belakang untuk membuat efek buram serta menerapkan kelas baru ke modal untuk menganimasikannya agar terlihat. Gaya baru menyesuaikan visibilitas serta menerapkan transformasi:

.open-meal-container {
    background: rgb(235, 235, 235, 0.85);
    visibility: visible;
    position: fixed;
    top: 50%;
    height: 85%;
    transform: translate(-50%, -50%) scale(1);
    overflow-y: auto;
    filter: none;
    box-shadow: rgba(45, 35, 66, 0.4) 0 16px 32px, rgba(45, 35, 66, 0.3) 0 28px 52px -12px;
    border: 5px solid rgba(255, 255, 255, 0);
    padding: 0px 20px 30px 30px;
}