모달창을 만들어보자

이승훈·2022년 8월 24일

CSS JavaScript TIL

시행착오

목록 보기

2/23

일단 모달창이라는것을 오늘 처음 알았다.

모달창은 기존의 페이지 위에 새로운 윈도우창이 아닌 레이어를 까는것을 말한다.
모달창을 제거하지 않고도 페이지를 이동하면 자연히 사라진다.
기존의 페이지와 부모-자식 관계를 갖는다.

팝업창과 다른점은 팝업창은 현재 의도와 목적에 상관이 없는 반면,
모달창은 다음 스텝으로 넘어가기 위한 필요에 의해 사용되는 창이라고 볼 수 있다.

자 그럼 나는 1.어떠한 모달창을 2.무슨 방법을 사용하려 했으며 어떤 이유로 실패하고 3. 어떠한 고민과정을 통해 문제를 해결하였는지 기술하고자 한다.

1. 구현하고자 하는 기능

인스타그램 메인페이지를 클론코딩하는 과정에 있으며, 우측상단의 사람모양 이미지를 클릭하면 로그아웃버튼을 포함하는 여기이거 가 보이며, 여기이거가 아닌 다른 부분을 클릭하였을 때 여기이거 박스가 사라진다. 여기이거를 클릭하면 여기이거는 사라지지 않는다.

2. 실패한 방법과 그 이유

z-index를 사용하려 하였다.
기존의 생각은 아래와 같았다.

container의 z-index 값을 990으로 준다.
Javascript에서 클릭한 타겟의 z-index값을 event.target.style.zIndex를 통해 받는다.
만일 container가 아닌 다른 요소를 클릭한다면 z-index값이 990이 아닐것이다.
클릭한 요소의 z-index값이 990이 아니라면 container를 display:none을 통해 화면에서 지워준다.

이 의도를 아래와같은 Javascript code를 통해 구현하려 하였다.

const body = document.body;

function containerHandler(event) {
	const zIndex = event.target.style.zIndex;
  if(zIndex !== 990){
    container의 display:none으로 바꿔주는 코드
  } 
}

body.addEventListner("click",containerHandler);

패착

const zIndex = event.target.style.zIndex;

이부분이다.
이부분이 나의 패착이다. javascript에서는 z-index를 받을 수 없다.

z-index 값이 있음에도 받을 수 없다.

받을 수 없는 이유는 분명히 알아봐야함 그 근본 원인을 알아야함.

-> 이거 알았음. 추후 별도고 글 기재 후 링크 첨부 예정

3.해결 과정

어차피 모든 태그는 body안에 있음.
body에 click 이벤트에대한 함수 작성
함수는 클릭한 대상의 className을 받아서 내가 원하는 className을 포함하는지 확인
내가 지정한 className이 아니면 container의 display:none으로 설정

코드로 구현하자면 아래와 같다.

const body = document.body;

function profileBoxDeleter(event) {
    console.log(event.target.classList);

    const isModal = event.target.classList;

    console.log(isModal.value.indexOf("modal") === -1);

    if(isModal.value.indexOf("modal") === -1){
        event.target.className !== "profileBox" ? profileBox.className = "profileBox_hidden" : {}
    }  
}

body.addEventListener("click", profileBoxDeleter);