자바스크립트를 이용한 모달(Modal) 창 켜고 끄기

웹 서비스를 설계하다보면 자주 사용하게 되는게 바로 모달(modal) 창 기능이다.

 

유저가 라우팅에 의한 페이지 이동을 해서 처리하기에는 애매한...

간단한 정보를 보거나 간단한 액션 처리를 하는데 유용하다.

 

모달창을 켜고 끄는 것은 새로운 기술을 사용하다기보다는

그냥 기존 ui 위에 새로운 ui를 덧대서 보여주는 기능이라고 보면 된다.

 

덧대서 보여주는 것을 영어로 오버레이(overlay)라고 표현하기 때문에

모달 오버레이라고 부르기도 한다.

export async function getContactModal() {

const existingModal = document.getElementById('contact-modal');

if (existingModal) {

existingModal.remove();

}

document.body.innerHTML += `

<div class="modal" id="contact-modal">

<div class="modal-content" onclick="event.stopPropagation()">

<div class="modal-wrapper">

<h1>Contact</h1>

</div>

</div>

</div>

`;

// 모달 표시

const modal = document.getElementById('contact-modal');

if (modal) {

modal.style.display = 'flex';

modal.onclick = (e) => {

if (e.target === modal) {

modal.style.display = 'none';

}

};

}

}

 

어떤 이벤트에 의해 이런 함수를 실행시킨다면 모달을 켜고 끌 수 있다.

모달이라는 클래스를 선택자로 잡아서 스타일 디스플레이를 제어하는 방법으로 켜고 끈다.

켜게되면 body에 html이 심어지는 원리.

 

/* 모달 */

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

display: flex;

justify-content: center;

align-items: center;

z-index: 999;

}

.modal-content {

width: 500px;

height: fit-content;

background-color: white;

padding: 20px;

}

 

스타일을 보면 포지션 픽스드에 화면을 꽉 채워서 덮는 반투명 블랙과 같은 아래쪽을 가려주는 백그라운드를 깔고

그 위에 모달 콘텐츠 컨테이너가 뜨게 된다.

즉 모달은 가독성을 위해 밑에 깔아주는 판과 그 위에 뜨는 콘텐츠의 합으로 구성되어 있다는 것.

 

컨택 버튼을 눌렀을 때 뜨는 모달 테스트