반응형 모달창 만들기｜전체화면 팝업 UI 완성 가이드

반응형 모달창은 일반적인 브라우저 새창과는 다르게 조금 더 사용자 편의성이 좋으며, 하나의 웹페이지에서 기능을 수행하고, 여러 가지 이벤트와 각종 뷰에 대해서 다양한 반응을 보여주는 괜찮은 UI라고 생각합니다.

반응형 모달창 예제 소스

예제 소스는 HTML, CSS, JavaScript로 구성해서 하나씩 알려드리고, 마지막은 실행되는 결과를 확인해 보겠습니다.

HTML 예제 소스

<button id="openModal">모달 열기</button>

<div id="fullscreenModal" class="modal">
	<div class="modal-content">
		<span class="close-btn">×</span>
		<h2>전체화면 모달창</h2>
		<p>이곳에 내용을 입력하세요.</p>
	</div>
</div>

<button id="openModal">모달 열기</button>

<div id="fullscreenModal" class="modal">
	<div class="modal-content">
		<span class="close-btn">×</span>
		<h2>전체화면 모달창</h2>
		<p>이곳에 내용을 입력하세요.</p>
	</div>
</div>

HTML

버튼 클릭해서 모달창을 호출 하는 HTML 코드 입니다.

CSS 예제 소스

/* 전체화면 모달 기본 숨김 상태 */
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
	transition: opacity 0.3s ease;
}

/* 모달 안쪽 콘텐츠 */
.modal-content {
	background-color: #fff;
	margin: 5% auto;
	padding: 30px;
	border-radius: 8px;
	width: 90%;
	max-width: 600px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.3);
	animation: fadeInUp 0.4s ease;
}

/* 닫기 버튼 */
.close-btn {
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

/* 애니메이션 */
@keyframes fadeInUp {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* 반응형 CSS */
@media (max-width: 700px) {
	.modal-content {padding: 20px;box-sizing: border-box;}
}

/* 전체화면 모달 기본 숨김 상태 */
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
	transition: opacity 0.3s ease;
}

/* 모달 안쪽 콘텐츠 */
.modal-content {
	background-color: #fff;
	margin: 5% auto;
	padding: 30px;
	border-radius: 8px;
	width: 90%;
	max-width: 600px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.3);
	animation: fadeInUp 0.4s ease;
}

/* 닫기 버튼 */
.close-btn {
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

/* 애니메이션 */
@keyframes fadeInUp {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* 반응형 CSS */
@media (max-width: 700px) {
	.modal-content {padding: 20px;box-sizing: border-box;}
}

CSS

모달창 기본 CSS와 모달창 활성화 시 배경처리 CSS
모달창 닫기 버튼과 모달창 활성화 시 애미네이션 효과
반응형은 가로 700px 이하이면 적용되는 CSS

JavaScript 예제 소스

const modal = document.getElementById("fullscreenModal");
const openBtn = document.getElementById("openModal");
const closeBtn = modal.querySelector(".close-btn");

// 모달 열기
openBtn.onclick = () => {
	modal.style.display = "block";
};

// 모달 닫기
closeBtn.onclick = () => {
	modal.style.display = "none";
};

// 배경 클릭 시 닫기
window.onclick = (event) => {
	if (event.target === modal) {
		modal.style.display = "none";
	}
};

const modal = document.getElementById("fullscreenModal");
const openBtn = document.getElementById("openModal");
const closeBtn = modal.querySelector(".close-btn");

// 모달 열기
openBtn.onclick = () => {
	modal.style.display = "block";
};

// 모달 닫기
closeBtn.onclick = () => {
	modal.style.display = "none";
};

// 배경 클릭 시 닫기
window.onclick = (event) => {
	if (event.target === modal) {
		modal.style.display = "none";
	}
};

JavaScript

모달창 열기/닫기 기능
배경 클릭 시 모달창 닫기 기능

예제 확인

반응형 모달창에 대한 예제 소스와 소스가 제대로 동작을 하는지 알아봤습니다. 기본적인 반응형 모달창에 대해서 알아봤습니다. 해당 소스에서 커스텀으로 나에게 맞는 반응형 모달창을 만들면 좋을 거 같습니다. 다음 시간에는 애니메이션 효과를 조금 더 추가한 예제를 한번 만들어서 소개해 드리겠습니다.

개발용 모니터 추천

LG전자 FHD 모니터 화이트, 68.6cm, _LG 27MN430HW 화이트

주연테크 FHD 커브드 게이밍 모니터, 80cm, X32FC-165(일반)

34인치 울트라와이드 커브드 게이밍 모니터 165Hz UWQHD 4k 27인치 모니터 180Hz FHD 커브드 컴퓨터 화면 Gawfolk 할인중, 70cm, 27inch 1k 180Hz

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”