[TIL] 자기소개 페이지 Chapter 3. 모달창 만들기

 

1. 시작

◎ 현재 많은 애플리케이션에 사용되는 모달을 만들어 보고 싶었다.

스터디 기간에 만들었던 자기소개 페이지에 my resume 버튼을 클릭하면 이력서 미리 보기 모달이 나오게 구현해보았다.

 

2. 레이아웃

정말 간단히 만든 레이아웃이다. 나중에 더 제대로 구현할 생각이다.

문득 모달을 만들어보고 바로 구현해본 거라 없어 보일 수 있다.

레이아웃을 먼저 구성한 후 css를 입혀보았다.

 

css를 입히고 나름 모달 처럼 나왔다.

하지만 시작부터 모달이 나오는 문제가 발생하였다.

모달은 어떠한 클릭이벤트가 걸리면 나오기 때문이다.

이제 코드를 보면서 해결책을 봐보자.

3. 코드

◎ html code

<div class="section_link">
    <ul class="ul_flex">
        <li>
            <button class="modal_btn" id="my_resume">
                <span>my resume</span>
            </button>
        </li>
    </ul>
</div>
<div class="modal_wrapper" style="display: none;">
    <div class="modal">
        <div class="modal_title">
            <p>안녕하세요</p>
        </div>
        <div class="modal_info">
            <p>이력서 미리보기 모달창</p>
        </div>
        <div class="close_wrapper">
            <button id="close">닫기</button>
        </div>
    </div>
</div>

• .section_link class를 가진 div 아래에 모달 코드를 작성하였다.

• 아까 말했던 시작 하자마자 모달이 켜져 있는 상황을 .modal_wrapper class를 가진 모달의 가장 부모 요소한테 inline style을 display: none;으로 설정하여 클릭 후 모달이 켜질 수 있게 레이아웃을 구현하였다.

◎ css code

/* modal */
.modal_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal {
    position: relative;
    width: 500px;
    height: 500px;
    background: white;
    padding: 24px 16px;
    border-radius: 4px;
   
}
.modal_title {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
}
.close_wrapper {
    position: absolute;
    top: 24px;
    right: 16px;
}
.close_wrapper #close {
    cursor: pointer;
}

• .modal_wrapper class를 가진 div에 전체적인 모달의 구성 css를 입혔다. position: fixed를 설정하여 뷰포트 기준 width, heigth를 100% 설정하여 background색을 입혀주었다. 물론 모달은 화면의 중앙에 위치하여야 하기 때문에 flex를 사용하여 중앙에 배치하였다.

• .modal class를 가진 div에 모달을 구성하는 css를 주었다.

• .close_wrapper class를 가진 div에 position: absolute를 주어서 부모요소(.modal)기준으로 버튼의 위치를 정해주었다.

◎ javascript code

// modal
const open = document.getElementById("my_resume");
const close = document.getElementById("close");
const modal = document.querySelector(".modal_wrapper");

open.addEventListener('click', function() {
  modal.style.display = "flex"; 
})

close.addEventListener('click', function() {
  modal.style.display = "none"; 
})

• DOM 요소들을 각 변수에 할당하였다.

• id가 my_resum의 요소를 클릭하면 클릭 이벤트를 발생하여 modal의 display를 flex로 동적으로 바꾸게 하였다.(이렇게 하면 html문서에 display: none;으로 설정된 게 display: flex; 로 바뀌어 모달이 뜬다.)

• id가 close이 요소를 클릭하면 modal의 display가 none으로 동적으로 바뀌게 하였다.(모달 사라짐)

4. 최종 결과

◎ 새로고침 한 후 실행한 결과이다. 모달은 클릭해야 나오게 구현하였다.

 

5. 문제점

◎ 모달까지 잘 구현했는데 문제점을 발견했다. 모달이 열리면 스크롤이 안되야 되는데 스크롤이 된다.. 동적으로 body태그에 overflow: hidden을 줬는데.. 해결이 안 된다. 

이 문제에는 더 찾아보고 기록해놔야겠다..ㅠㅠ

6. 느낀 점

◎ 평상시에 많이 접하는 모달 구현이 생각보다 까다로웠다.

전체적으로 신경 써야 할게 많으며, 동적으로 모든 걸 바꿔야 하니까 dom을 잘 다뤄야 할 거 같다.

지금은 스타일이 촌스럽지만 천천히 꾸며봐야겠다.

그리고 위에 적은 문제점에 대해서도 찾아봐야겠다.

드디어 해보고 싶은 기능 중 하나 모달 구현을 해보았다.