23.05.16) 팀프로젝트:팀 소개 - 멤버카드와 모달창 구성하기

🤓오늘 공부한 내용

오늘은 어제 기본으로 만들어놓은 틀을 바탕으로 팀원 이미지도 추가하고

팀원 카드 이미지를 누르면 모달창이 뜰 수 있게 만드는 것이 목표다.

모달창을 완성하고 시간이 되면 파이썬을 이용해서 flask서버까지 해볼 것이다.

팀원 카드에 들어가는 이미지를 고민하다가 슬랙에 올려진 개인 프로필 사진을

참고해서 아이폰 미모티콘으로 한번 만들어보았다.

 

🔍발생한 이슈

각 멤버 카드마다 다른 모달창이 나와야 하는데 다른 멤버 카드를 눌러도

처음 테스트로 만들어 놓은 모달창만 뜬다. 구글링 해보니까 아이디값이 충돌해서

안된것 같다. 개별 모달아이디를 주고 자바스크립트를 통해 동적인 모달창을 만들어야 한다.

📌해결과정

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="container">
            <div class="col">
                <div class="card h-100">
                    <img src="https://i.ibb.co/wcbM29J/image.jpg" class="card-img-top" alt="..." onclick="openModal(1)">
                    <div class="card-body">
                        <h2 class="card-title">이름</h2>
                        <p class="card-text">팀원</p>
                    </div>
                </div>
            </div>
            <div id="myModal1" class="modal"> <!-- 모달 요소 -->
                <div class="modal-content">
                    <span class="close" onclick="closeModal(1)">&times;</span>
                    <div class="modal-info">
                        <img src="https://i.ibb.co/wcbM29J/image.jpg" alt="이름 이미지" id="modal-img1">
                        <div class="modal-text">
                            <p>이름: 비밀</p>
                            <p>MBTI : INFJ</p>
                            <p>취미: 등산</p>
                            <p>블로그: 비밀</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

각 카드의 onclick 이벤트에서 openModal() 함수가 호출될 때

인자로 카드의 고유한 식별자 번호를1~5 입력해준다.

모달의 id 속성도 고유한 식별자를 가지도록 설정하면 각각의 모달을 구분할 수 있다.

 

// 모달 열기
function openModal(cardId) {
    var modal = document.getElementById("myModal" + cardId);
    modal.style.display = "block";
}

// 모달 닫기
function closeModal(cardId) {
    var modal = document.getElementById("myModal" + cardId);
    modal.style.display = "none";
}

// 페이지 로드 시 모달 닫기 이벤트 처리
window.onload = function () {
    var modals = document.getElementsByClassName("modal");
    for (var i = 0; i < modals.length; i++) {
        modals[i].style.display = "none";
    }
}

 

See the Pen 23.05.16) 팀프로젝트:팀 소개 - 멤버카드와 모달창 구성하기 by Treasure jin (@Treasure-jin) on CodePen.