화면을 개발할 때 자주 나오는 구성 요소 중 하나가 바로 모달(Modal) 창입니다. 팝업(Popup) 창과 약간 혼동해서 쓰는 경향이 있기는 한데 Modal과 Popup는 개념이 다릅니다.
팝업(Popup)은 현재 화면에 다른 화면을 하나의 창(Browser)으로 보여주는 기능이고, 모달(Modal)은 화면 위에 하나의 작은 화면을 더 만들어 부가적인 일들을 처리할 수 있게 만드는 기능입니다. 모달은 Winform에서 말하는 Dialog와 같은 개념이기도 합니다.
오늘은 자바스크립트를 사용해서 모달 창을 만드는 방법을 알아보도록 하겠습니다.
자바스크립트로 모달(Modal) 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Modal</title>
<style>
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="modal">
<div class="modal_body">Modal</div>
</div>
<button class="btn-open-popup">Modal 띄우기</button>
<script>
const modal = document.querySelector('.modal');
const btnOpenPopup = document.querySelector('.btn-open-popup');
btnOpenPopup.addEventListener('click', () => {
modal.style.display = 'block';
});
</script>
</body>
</html>먼저 CSS를 사용해서 Modal이 되는 대상의 position을 absoulte로 설정하고, 화면 전체 공간을 차지할 수 있도록 with, height 값을 100%로 설정합니다. 자바스크립트로는 <button>을 클릭하면, Modal의 style.display 값을 block으로 변경합니다.
이와 같은 내용만으로도 Modal은 손쉽게 구현이 가능합니다. 하지만 실제로 사용하려면 몇 가지 고민해야 하는 부분이 있습니다.
본문의 스크롤 동작을 막아야 한다.
<body>가 포함하고 있는 본문 내용이 브라우저의 크기보다 많아지면, 화면에서는 자동으로 스크롤을 추가해 브라우저 영역을 벗어난 <body>를 볼 수 있게 합니다. 이런 경우에 모달이 화면에 띄워지면 모달에서 발생한 마우스 스크롤 이벤트가 <body>에서 동작하는 문제가 있습니다. 이 문제를 해결하기 위해서는 모달이 on/off 되는 상황에 따라 body의 스크롤을 사용하지 못하도록 해야 합니다.
// 모달 on
body.style.overflow = 'hidden';
// 모달 off
body.style.overflow = 'auto';모달이 활성화되면 overflow를 hidden으로, 모달이 닫히면 auto로 변경하면 모달에서 발생한 스크롤 이벤트가 <body>까지 전달돼도 스크롤이 활성화되어 있지 않기 때문에 아무런 문제가 없습니다.
모달(Modal)의 본문을 중앙 정렬 하기.
모달을 구현할 때는 사용자의 이목을 끌기 위해서 검은색을 바탕으로 모달의 내용을 화면의 정중앙에 위치시키는 경우가 많습니다. 그래서 모달 같은 경우 하나의 <div>를 사용하기보다는 전경이 되는 <div>에 내용이 되는 <div> 이렇게 사용하시기를 추천드립니다. 그리고 이 내용은 자바스크립트로 구현하기보다는 CSS로 구현하는 게 더 좋습니다.
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.4);
}
.modal.show {
display: block;
}
.modal_body {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 600px;
padding: 40px;
text-align: center;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
transform: translateX(-50%) translateY(-50%);
}CSS를 활용하면, 자바스크립트를 통해 여러 가지 스타일을 수정하지 않고 class를 이용해 손쉽게 이용할 수 있기 때문입니다. 더불어 화면의 디자인을 정의하는 CSS를 사용해 모달의 스타일을 정의하는 것이 의미적으로도 맞습니다.
// class를 이용한 모달 on/off
modal.classList.toggle('show');예제 코드
위에서 이야기한 내용들을 추가해서 완성된 예제 코드는 파일로 첨부하였습니다. 예제 코드가 필요하시거나 실행해보기를 원하시는 분은 첨부한 파일을 다운로드 받아서 사용해주시면 됩니다.
<body> 스크롤 방지하기, 본문 중앙 정렬하기 외에도 몇 가지 더 고민을 해야 하는 부분이 있지만, 이 두 가지 문제를 알고 대처하는 것만으로도 실무에서는 큰 문제없이 사용할 수 있습니다.
끝맺음
자바스크립트와 CSS를 잘 사용한다면 모달 기능을 쉽게 만들 수 있습니다. 화면에 새로운 웹 페이지를 창으로 여는 것보다는 모달을 사용해서 사용자의 이목을 끌어보는 것은 어떨까요? 다만 모달을 이용하게 되면 한 페이지에 작성하는 코드가 많아지기 때문에 화면의 코드 복잡도가 높아지는 문제가 있습니다. 이런 문제는 모달을 하나의 모듈이나 컴포넌트로 분리해서 사용하는 방법도 있으니 한번 고민해보시면 좋을 것 같네요.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - debounce의 개념과 예제 코드 (2) | 2021.06.28 |
|---|---|
| Javascript - 화살표 함수를 선언하는 방법 [arrow function] (2) | 2021.06.06 |
| Javascript - 배열을 잘 사용하는 3가지 방법 [map, filter, reduce] (0) | 2021.05.29 |
| Javascript - call by value와 call by reference의 정의 (3) | 2021.05.28 |
| javascript - 함수(Function)란 무엇일까? (1) | 2021.05.27 |