모달창 만들기

위코드의 2주차 과제로 만든 자기소개 페이지에 새로운 기능을 추가하려 한다.
나의 sns같은 네트워크 서비스의 아이디를 표시하기 위한 Contact 모달창을 띄우는 것이 목표다.
팝업창과 모달창 두가지가 있는데 팝업창은 현재 페이지에서 새로운 웹 페이지를 띄우는 것이고
모달창은 현재 페이지에서 다른 레이어의 공간을 띄우는것이다.
팝업창은 다른 웹 페이지로 이동해도 그대로 유지되나 모달창은 다른 웹 페이지로 이동한다면 같이 닫히게 된다.

다음은 모달창을 만들기 위한 HTML과 Script 코드이다.

<div class="modal">
	<div class="modal_body"><h1>Contact</h1>
		<P><strong>KakaoTalk</strong>: wi4020</P>
		<p><strong>Mail</strong>: wirush4020@gmail.com</p>
		<p><strong>Discord</strong>: 달봉애비#0948</p>
		<p>(달봉은 키우는 고양이 입니다^^;)</p>
	</div>
</div>
<button class="btn-open-popup">Contact</button>   
<script>
	const body = document.querySelector('body');
	const modal = document.querySelector('.modal');
	const btnOpenPopup = document.querySelector('.btn-open-popup');

	btnOpenPopup.addEventListener('click', () => {
		modal.classList.toggle('show');

		if (modal.classList.contains('show')) {
			body.style.overflow = 'hidden';
		}
	});

	modal.addEventListener('click', (event) => {
		if (event.target === modal) {
			modal.classList.toggle('show');

			if (!modal.classList.contains('show')) {
				body.style.overflow = 'auto';
			}
 		}
	});
</script>

인터넷에서 참조한 코드라 대부분 활용하면서 원리들을 살펴볼 필요가 있었다.

기초적인 코드들을 지나고 보면 낯선 코드가 눈에 띈다.
바로 querySelector()이다. 먼저 이것에 대해 알아볼 필요가 있을 것 같다.

element = document.querySelector(selectors);

selector의 구체적인 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다. 일치하는게 없으면 null반환한다.

사실 위 설명부터 무슨 소린지 이해하기가 어렵다;;
먼저 document.querySelector('body') 는 body태그를 선택한 것이고,
document.querySelector('.modal') 는 클래스가 modal인 요소를 선택한 것이다.

다음으로는 addEventListener 가 보인다.
이 메서드는 이름에서부터 추측이 가능하다. 보이는대로 이벤트를 등록하는 메서드이다.

toggle 메서드는 스위치처럼 on / off 기능을 한 줄로 구현할 수 있다.

다음은 CSS 코드이다.

.modal {
    position: absolute;
    top: 0;
    left: 0;
  
    width: 100%;
    height: 100%;
  
    display: none;
  
    background-color: rgba(0, 0, 0, 0.4);
    mix-blend-mode: normal;
  }
  
  .modal.show {
    display: block;
  }
  
  .modal_body {
    position: absolute;
    top: 50%;
    left: 50%;
  
    width: 400px;
    height: 600px;
  
    padding: 40px;
  
    text-align: center;
    font-size: 22px;
  
    background-color: #d6cfc7;
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 1);
  
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
  }

여기서 중요한 것은 z-index로 레이어 순위를 지정해야 모달창의 요소들이 아래의 레이어와 겹치지 않고 표시가 된다.

결과물은 다음과 같다.