모달 "팝업" 만들기 || HTML/CSS/바닐라 JS

요즈음 로그인을 클릭하면 전경에 양식이 마법처럼 나타나거나 이미지를 선택하여 더 크게 볼 수 있는 일종의 "팝업" 기능을 사용하는 웹 페이지를 방문하지 않고는 인터넷을 탐색하기가 어렵습니다. 첫 번째 웹 개발 프로젝트(공용 API themealDB.com 의 데이터를 활용하는 간단한 식사/레시피 생성기) 중 하나를 작업하면서 이 유형의 방법이 선택한 항목을 기반으로 자세한 레시피 정보를 표시하는 완벽한 방법이라고 생각했습니다. 식사! 그래서 공식적으로 모달 이라고 부르는 이 "팝업"을 만드는 여정이 시작되었습니다 .

HTML 설정

내 경우 HTML 파일 내에서 모달을 위한 컨테이너를 설정하는 것은 JavaScript가 실제로 정보를 채우는 데 많은 노력을 기울였기 때문에 매우 간단했습니다. class 속성이 있는 간단한 <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);
}

CSS로 모달 스타일 지정

마지막으로 모든 원시 정보를 가져와서 팝업 모달을 차지하도록 만들 차례입니다! 첫 번째 단계는 내가 설정한 <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;
}