<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Modal</title>
<style>
.modal {
/* 어둡게 모달의 배경이 될 부분. */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.4);
}
.modal_body {
/* 가운데 배치 */
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 400px;
height: 600px;
padding: 40px;
text-align: center;
background-color: rgb(255, 255, 255);
border-radius: 10px;
box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
}
.modal_body .btn-close-modal {
width: 50px;
height: 30px;
position: absolute;
left: 5%;
right: 5%;
bottom: 5%;
margin: auto;
}
</style>
</head>
<body style="height: 2000px;">
<div class="modal">
<div class="modal_body">
Modal
<button class="btn-close-modal">close</button>
</div>
</div>
<button class="btn-open-popup">Modal 띄우기</button>
<script>
const modal = document.querySelector('.modal');
const btnOpenPopup = document.querySelector('.btn-open-popup');
const btnCloseModal = document.querySelector('.btn-close-modal');
// 모달 on
btnOpenPopup.addEventListener('click', () => {
modal.style.display = 'block';
// 모달에서 스크롤이 필요한데 body에도 스크롤이 있을 경우, 모달이 아니라 body에서 스크롤이 동작할 수 있음
// 따라서 모달이 on되면 body에서 스크롤이 동작하지 않도록 해야 함
document.body.style.overflow = 'hidden';
});
// 모달 off
btnCloseModal.addEventListener('click', () => {
modal.style.display = 'none';
document.body.style.overflow = 'auto';
});
</script>
</body>
</html>
참조
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
| JS - [ 모달 팝업 띄우기 (Swiper이용 이미지 슬라이드) ] (0) | 2022.07.24 |
|---|---|
| JS - [ 자식 Element에 Event 전파 막기 ] (0) | 2022.07.22 |
| JS - [ js 파일 수정사항 브라우저에 바로 반영] (0) | 2022.07.08 |
| JS - [ input date로 받아온 날짜 비교 ] (0) | 2022.07.04 |
| JS - [input 태그 엔터키 눌렀을 때 이벤트] (0) | 2022.07.03 |