[javascript]모달 팝업 구현하기

🧐 모달 팝업이란
일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미합니다

1. 구현 방향

우선 간단하게 아래와 같은 시나리오로 작업을 해보겠습니다
1️⃣ 버튼을 클릭하면 모달 팝업이 보여진다
2️⃣ 닫기 버튼을 누르면 팝업이 닫힌다

2. 구현

📝 html + css

html과 css로 구조와 스타일을 적용합니다

<!--모달 팝업-->
<div class="modal">
    <div class="modal_popup">
        <h3>모달 팝업 타이틀 입니다!</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, ut facere id ullam ea adipisci et ipsam est quidem commodi ducimus nostrum cum optio non dolor! Quam ipsum nam rem!</p>
        <button type="button" class="close_btn">닫기</button>
    </div>
</div>
<!--end 모달 팝업-->
<main>
    <section>
        <h2>모달 팝업</h2>
        <button type="button" class="modal_btn">클릭하면 모달팝업이 보여집니다</button>
    </section>
</main>

위의 그림 처럼 평소 보여지는 웹페이지(노란색)영역과 모달 팝업의 배경(+컨텐츠) 영역을 구분하였습니다

h2{
    text-align: center;
}
.modal_btn {
    display: block;
    margin: 40px auto;
    padding: 10px 20px;
    background-color: royalblue;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.modal_btn:hover {
    box-shadow: 3px 4px 11px 0px #00000040;
}

/*모달 팝업 영역 스타일링*/
.modal {
/*팝업 배경*/
	display: none; /*평소에는 보이지 않도록*/
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
}
.modal .modal_popup {
/*팝업*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: #ffffff;
    border-radius: 20px;
}
.modal .modal_popup .close_btn {
    display: block;
    padding: 10px 20px;
    background-color: rgb(116, 0, 0);
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

구분한 영역 중 모달 팝업의 배경이 되는 영역을 position: absolute;로 설정하여 레이어로 화면을 덮는 효과를 주었고 팝업은 해당 배경 가운데 정렬이 될 수 있도록 처리 했습니다.
+ 평소에는 보여지지 않도록 display: none처리

작성된 코드를 실행시켜보면 아래와 같이 모달팝업이 평소에는 보여지지 않고 display: none을 해제 했을 때 보여지며, 의도한대로 화면에 출력되고 있는걸 확인 할 수 있습니다.

⚙️ javascript

자바스크립트로 구현하는 방식은

1. class로 처리하는 방법
2. 직접 css style을 변경하는 방법

이렇게 2가지 방식을 생각할 수 있습니다

1️⃣ class로 처리하는 방법
js작업 전 'modal'에 'on' class가 추가되었을 때 보여지도록 하는 css를 추가합니다.

.modal.on {
    display: block;
}

const modal = document.querySelector('.modal');
const modalOpen = document.querySelector('.modal_btn');
const modalClose = document.querySelector('.close_btn');

//열기 버튼을 눌렀을 때 모달팝업이 열림
modalOpen.addEventListener('click',function(){
  	//'on' class 추가
    modal.classList.add('on');
});
//닫기 버튼을 눌렀을 때 모달팝업이 닫힘
modalClose.addEventListener('click',function(){
    //'on' class 제거
    modal.classList.remove('on');
});

2️⃣ 직접 css style을 변경하는 방법

const modal = document.querySelector('.modal');
const modalOpen = document.querySelector('.modal_btn');
const modalClose = document.querySelector('.close_btn');

//열기 버튼을 눌렀을 때 모달팝업이 열림
modalOpen.addEventListener('click',function(){
    //display 속성을 block로 변경
    modal.style.display = 'block';
});
//닫기 버튼을 눌렀을 때 모달팝업이 닫힘
modalClose.addEventListener('click',function(){
   //display 속성을 none으로 변경
    modal.style.display = 'none';
});

이때, 직접 css style을 변경했을 경우에는 변경한 스타일은 인라인으로 지정 되기 때문에 해당 내용을 고려하여 적합한 방법을 선택하여 작성하면 됩니다

'modal.style.display' 으로 처리했을때 개발자 모드에서 확인해보면 지정한 스타일이 인라인으로 들어가 있는걸 확인 할 수 있다

3. 완성

원본코드는 아래 깃허브에서 확인할 수 있습니다!
https://github.com/seungmimi/velog/tree/main/modal-popup