[개발] 모달(Modal)창 만들기 (feat. 팝업 창과의 차이점)

모달 창 만들기 연습에 앞서 팝업창과 모달 창의 차이점을 알아보겠습니다. (모달 창을 직접 만들어보면 알게 되지만요.)

팝업 창

• 목적: 팝업 창은 주로 새로운 브라우징 창을 열어 다른 웹 페이지, 광고, 알림, 미디어 등을 표시하는 데 사용됩니다. 주로 웹 브라우저에서 볼 수 있으며, 사용자에게 새로운 창을 열어 웹 페이지 내용을 표시합니다. 
• 독립 창: 팝업 창은 일반적으로 원래 페이지와 독립된 창으로 열립니다. 이것은 다른 페이지와 분리되어 동작하므로 사용자가 주 창과 팝업 창 간을 이동하거나 중복 창을 열 수 있습니다. 
• 제한적 동작: 팝업 창은 일반적으로 더 많은 권한을 갖습니다. JavaScript 팝업 창은 브라우저의 보안 기능을 우회할 수 있으므로 팝업 창이 남용되지 않도록 브라우저에서 차단되는 경우가 많습니다.

모달 창

• 목적: 모달 창은 주로 현재 화면의 일부를 가리며 사용자의 주요 작업을 방해하거나 일시 중단시키고 중요한 정보를 제공하거나 추가 작업을 수행하기 위한 인터페이스를 제공합니다. 
• 부모 창 내에 존재: 모달 창은 일반적으로 원래 페이지나 앱 내에 존재하며, 주로 웹 페이지의 상위 레이어로 나타납니다. 모달 창이 열리면 주요 작업은 모달 창 내에서 이루어집니다. 
• 사용자 행동 대기: 모달 창이 열린 경우, 사용자는 모달 창 내에서 특정 작업을 완료하기 전에 주 창과 상호작용할 수 없습니다. 모달 창이 닫힐 때까지 사용자는 모달 창 내 작업에 집중해야 합니다.

팝업 창과 모달 창의 차이점

팝업 창은 주로 새로운 브라우징 창을 열어 다른 웹 페이지를 표시하는 데 사용되고, 모달 창은 주로 현재 페이지나 앱 내에서 일시 중단되는 작업을 위한 인터페이스를 제공합니다. 팝업 창은 독립된 창으로 열릴 수 있으며 보안 문제로 인해 제한된 권한을 가질 수 있습니다. 반면 모달 창은 부모 창 내에 존재하며 주요 작업이 모달 창 내에서 이루어집니다.

 

직접 제작해 보면 모달창을 열면 원래 작업을 하던 창은 동작할 수 없게 됩니다.

예시를 만들러 가보겠습니다.

 

모달 창 만들기

HTML

<button id="modalOpenButton">모달창 열기</button>
<div id="modalContainer" class="hidden">
  <div id="modalContent">
    <p>호소세 화이팅</p>
    <button id="modalCloseButton">닫기</button>
  </div>
</div>

1. 모달 창을 여는 버튼 생성

2. 모달 창 생성 (내용 및 닫기 버튼)

CSS

#modalOpenButton, #modalCloseButton {
  cursor: pointer;
}

#modalContainer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

#modalContent {
  position: absolute;
  background-color: #ffffff;
  width: 300px;
  height: 150px;
  padding: 15px;
}

#modalContainer.hidden {
  display: none;
}

1. 버튼들에 마우스 커서를 올릴 때 포인터로 변경 (선택 버튼 누를 때 나오는 손 커서)

2. 모달의 내용을 담는 컨테이너

• position: fixed;: 요소를 화면에 고정된 위치에 배치합니다. 스크롤이 내려가더라도 요소의 위치는 고정됩니다. 
• top: 0; left: 0;: #modalContainer를 화면의 왼쪽 상단 모서리에 고정합니다. 
• display: flex;: Flexbox 레이아웃 모델을 사용하여 자식 요소를 가로 또는 세로 중앙 정렬하기 위한 컨테이너로 설정합니다. 
• justify-content: center; align-items: center;: Flexbox 레이아웃을 사용하여 자식 요소를 수평 (가로) 및 수직 (세로)으로 가운데 정렬합니다. 이로써 모달 창은 화면 가운데 정렬됩니다.
• rgb는 투명도를 0.5로 변경한 것입니다.

이렇게 하면 화면 중앙에 고정된 모달 창이 완성됩니다.

 

3. 모달의 내용에 대한 css입니다.

4. 모달 컨테이너에 hidden class가 생성되면 안 보이게 만듭니다.

 

JavaScript

const modalOpenButton = document.getElementById('modalOpenButton');
const modalCloseButton = document.getElementById('modalCloseButton');
const modal = document.getElementById('modalContainer');

modalOpenButton.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

modalCloseButton.addEventListener('click', () => {
  modal.classList.add('hidden');
});

window.addEventListener('click', function(event) {
  if (event.target === modal) {
       modal.classList.add('hidden');
    }
});

1. 열기 버튼 누르면 모달 컨테이너 class에서 hidden 제거하는 함수

2. 닫기 버튼 누르면 모달 컨테이너 class에서 hidden 생성하는 함수

3. 윈도우 이벤트 추가 - 모달 컨테이너가 아닌 곳을 누르면 모달 컨테이너 class에서 hidden 제거하는 함수 

 

이렇게 만들면 완성입니다.

 

만약에 모달 창이 나오게 되면 상위 페이지가 동작되지 않는 것을 보고 싶으면 윈도우 이벤트를 삭제하고 구동해 보세요.

상위 페이지는 아무것도 눌리지 않는 것을 확인할 수 있습니다.

 

소감

어쩐지 가끔 창이 뜨면 다른 동작을 못하게 하는 창이 있었는데, 그게 모달 창이라는 것을 알게 되었습니다.

직접 어떤 것들을 만들 수 있다는 것이 개발자의 장점이라고 생각합니다.

행동으로 실행하면 더욱더 빛을 발할 것입니다.

---

출처 : https://velog.io/@bami/%EB%AA%A8%EB%8B%AC-%EC%B0%BD-Modal

모달 창 Modal