순수 자바스크립트로 modal popup을 구현해보려고 합니다.
기능 요구사항
1. "open modal" 버튼을 누르면 팝업이 뜬다.
2. "X" 버튼을 누르면 팝업이 닫힌다.
3. 팝업 이외 부분을 누르면 닫힌다.
4. 팝업 안을 눌렀을 때 닫히면 안된다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- body overlay -->
<div class="body-blackout"></div>
<!-- Modals Triggers -->
<a
type="button"
class="btn btn-sm btn-primary popup-trigger">
open modal
</a>
<!-- Modals -->
<div
class="popup-modal shadow"
data-popup-modal="one">
<i class="fa fa-window-close popup-modal__close"></i>
<h1 class="font-weight-bold">
팝업 제목
</h1>
<div>
팝업 내용 123 <br />
팝업 내용 123 <br />
팝업 내용 123 <br />
팝업 내용 123 <br />
팝업 내용 123
</div>
</div>
<script src="./index.js"></script>
</body>
</html>.body-blackout은 모달 바탕화면이고, modal보다 z-index가 낮게 만들 예정이다.
즉, .body-blackout 위로 modal을 띄운다.
style.css
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
}
body {
background-color: #f6f6f6;
min-height: 100vh;
height: 100vh;
padding: 35px;
position: relative;
}
a {
text-decoration: none;
color: inherit;
}
.body-blackout {
position: absolute;
z-index: 1010;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .65);
display: none;
}
.body-blackout.is-blacked-out {
display: block;
}
.popup-trigger {
display: inline-block;
}
.popup-modal {
height: 365px;
width: 650px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 45px;
opacity: 0;
pointer-events: none;
z-index: 1011;
}
.popup-modal.is--visible {
opacity: 1;
pointer-events: auto;
}
.popup-modal__close {
position: absolute;
font-size: 5rem;
right: -10px;
top: -10px;
cursor: pointer;
}
index.js
document.addEventListener("DOMContentLoaded", ( ) => {
const bodyBlackout = document.querySelector('.body-blackout')
const popupModal = document.querySelector('.popup-modal')
document.querySelector('popup-trigger').addEventListener("click", ( ) => {
popupModal.classList.add('is--visible')
bodyBlackout.classList.add('is-blacked-out')
});
popupModal.addEventListener("click", ( ) => {
popupModal.classList.remove('is--visible')
bodyBlackout.classList.remove('is-blacked-out')
});
bodyBlackout.addEventListener("click", ( ) => {
popupModal.classList.remove('is--visible')
bodyBlackout.classList.remove('is-blacked-out')
});
});
'자바스크립트' 카테고리의 다른 글
| Function.prototype.bind() (0) | 2021.11.10 |
|---|---|
| Jquery UI draggable creates a whitespace (0) | 2021.11.05 |
| script 태그의 async와 defer 속성 (0) | 2021.08.26 |
| Javascript’s __proto__ vs prototype (0) | 2021.06.28 |
| 생성자 함수의 객체 생성 (0) | 2021.06.09 |
