การสร้าง Modal “ป๊อปอัพ” || HTML/CSS/วานิลลา JS

ทุกวันนี้ เป็นเรื่องยากที่จะท่องอินเทอร์เน็ตโดยไม่เจอหน้าเว็บที่ใช้คุณสมบัติ "ป๊อปอัป" บางอย่าง ไม่ว่าจะเป็นการคลิกเข้าสู่ระบบและแบบฟอร์มปรากฏขึ้นอย่างน่าอัศจรรย์ในเบื้องหน้า หรือการเลือกรูปภาพเพื่อให้ได้มุมมองที่ใหญ่ขึ้น ในขณะที่ฉันกำลังทำงานในโครงการพัฒนาเว็บไซต์โครงการแรกของฉัน (เครื่องมือสร้างอาหาร/สูตรอาหารอย่างง่ายโดยใช้ข้อมูลจาก API สาธารณะthemealDB.com ) ฉันคิดว่าวิธีการประเภทนี้จะเป็นวิธีที่สมบูรณ์แบบในการแสดงข้อมูลสูตรอาหารโดยละเอียดตามสูตรที่เลือก มื้อ! ดังนั้นการเดินทางของฉันจึงเริ่มต้นขึ้นในการสร้าง "ป๊อปอัป" นี้ ซึ่งตอน นี้ฉันทราบอย่างเป็นทางการว่าmodal

การตั้งค่า HTML

ในกรณีของฉัน การตั้งค่าคอนเทนเนอร์สำหรับโมดอลในไฟล์ HTML ของฉันนั้นค่อนข้างง่าย เนื่องจาก JavaScript ทำการยกข้อมูลอย่างหนักเพื่อเติมข้อมูล องค์ประกอบ <div> อย่างง่ายที่มีแอตทริบิวต์คลาสจะทำเพื่อเริ่มต้น:

<div class="meal-container">

</div>

ดังที่ฉันได้กล่าวไว้ JavaScript เป็นหนึ่งในฮีโร่ตัวจริงในเรื่องนี้ ด้วยการใช้การจัดการ DOM เพื่อสร้าง ปรับแต่ง และเพิ่มข้อมูลที่จำเป็นทั้งหมดลงในการ์ดสูตรอาหารของฉัน ฉันจึงสามารถแสดงข้อมูลสำคัญทั้งหมดแก่ผู้ใช้ด้วยวัตถุมื้ออาหารเฉพาะที่ดึงมาจาก API (ชื่อเรื่อง/รูปภาพ/ส่วนผสม/ คำแนะนำ):

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 ด้วย CSS

สุดท้าย แต่ไม่ท้ายสุด ถึงเวลาแล้วที่จะดึงข้อมูลดิบทั้งหมดและทำให้มันครอบครอง modal ป๊อปอัพ! ขั้นตอนแรกคือการสร้างการ์ดเปล่าโดยใช้ <div> ที่ฉันตั้งค่าไว้

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

สิ่งนี้เกิดขึ้นได้ภายใน JavaScript โดยที่ตัวฟังเหตุการณ์ใช้สไตล์เพิ่มเติมกับพื้นหลังเพื่อสร้างเอฟเฟกต์เบลอ รวมถึงใช้คลาสใหม่กับโมดอลเพื่อทำให้เคลื่อนไหวในมุมมอง รูปแบบใหม่ดูแลการปรับการมองเห็นเช่นเดียวกับการใช้การเปลี่ยนแปลง:

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