javaScript로 모달 창 구현하기

듣고 있는 강의가 쇼핑몰 구축 쪽으로 들어갔는데 프론트엔드쪽에서 모달 창을 띄우는 부분이 나왔다. 강의는 리액트 기반으로 진행되었는데 나는 기본 자바스크립트로 구축하고 있기 때문에 기본 자바스크립트로 모달창을 구현해보았다. 구현은 챗 지피티 도움을 많이 받았다.

 

<!-- 모달 -->

<div id="item-modal" class="modal" style="display: none;">

<div class="modal-content">

<span class="close-btn">&times;</span>

<h2>상품 추가</h2>

<label>상품번호</label>

<input type="text" id="item-sku">

<br>

<label>상품명</label>

<input type="text" id="item-name">

<br>

<label>설명</label>

<textarea name="" id="item-description"></textarea>

<br>

<label>재고 설정</label>

<button id="add-stock">재고 추가</button>

<br>

<div id="stock-container"></div>

<label>이미지</label>

<button id="add-img">업로드 이미지</button>

<br>

 

<label>가격</label>

<input type="number" id="item-price">

<br>

<label>카테고리</label>

<input type="text" id="item-category">

<br>

<label>상태</label>

<input type="text" id="item-status">

<br>

<button id="save-item-btn">상품 추가하기</button>

</div>

</div>

먼저 html에서 이런식으로 구성.

 

 

/* 이 부분이 모달 백그라운드 눌러주는 역할 */

.modal {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

display: flex;

justify-content: center;

align-items: center;

 

}

/* 이 부분이 실제 모달 콘텐츠 */

.modal-content {

background-color: #fff;

padding: 20px;

border-radius: 5px;

width: 300px;

display: flex;

flex-direction: column;

gap: 5px;

}

.close-btn {

cursor: pointer;

}

그리고 이건 CSS

 

const modal = document.getElementById('item-modal');

const closeBtn = document.querySelector('.close-btn');

 

// 상품추가 버튼 클릭 시 모달 표시

document.getElementById('add-item-btn').addEventListener('click', () => {

modal.style.display = 'flex';

});

// 닫기 버튼 클릭 시 모달 닫기

closeBtn.addEventListener('click', () => {

modal.style.display = 'none';

});

// 모달 외부 클릭 시 닫기

window.addEventListener('click', (event) => {

if (event.target === modal) {

modal.style.display = 'none';

}

});

그리고 자바스크립트에서는 이런식으로 코드가 구성되었다.

 

독특한 부분은 컨테이너 역할을 하는 modal이라는 부분이 스타일적으로는 모달 창 뒤를 눌러주는 반투명 검은 백그라운드가 되고 그 안쪽 콘텐츠인 modal-content가 실제 창의 역할을 한다.

버튼들에 이벤트를 걸어서 모달의 스타일 디스플레이를 켜고 끄는 방법으로 구동되었다. 모달 창 외부를 클릭 했을 때 창을 끄는 방법은 window에 이벤트를 걸어서 진행되었는데 위 코드대로 구성하면 모달 창 외부 클릭 시 창이 닫힌다.

 

 

이렇게 모달 창 기능 구현 완료!