<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>모달 테스트</title>
<script>
function toggle(){
let body = document.getElementsByTagName('body')[0];
body.classList.toggle("not-scroll");
popup();
}
function openModal(){
let body = document.getElementsByTagName('body')[0];
let modalHtml = `
<div id="modal" class="container">
<div class="wrapModal">
<div class="modal">
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
<button onclick="openCheck()">확인</button>
<button onclick="closeModal()">닫기</button>
</div>
</div>
</div>
`
body.classList.add("not-scroll");
body.insertAdjacentHTML('afterend',modalHtml);
}
function closeModal(){
let body = document.getElementsByTagName('body')[0];
let modal = document.getElementById('modal');
body.classList.remove("not-scroll");
modal.remove();
}
function openCheck(){
let body = document.getElementsByTagName('body')[0];
let modalHtml = `
<div id="check" class="container level">
<div class="wrapModal">
<div class="modal">
정말 실행하시겠습니까?
<button onclick="closeCheck()">닫기</button>
</div>
</div>
</div>
`
body.classList.add("not-scroll");
body.insertAdjacentHTML('afterend',modalHtml);
}
function closeCheck(){
let check = document.getElementById('check');
check.remove();
}
</script>
</head>
<body>
<div>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
<button onclick="openModal()">모달</button>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
<button onclick="openModal()">모달</button>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
<button onclick="openModal()">모달</button>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
본문<br>
</div>
</body>
</html>
.not-scroll {
overflow: hidden;
}
.container {
/*
relative: 상대적 위치, 내 위 엘리먼트로부터 T B L R 이라 생각하면 좋을듯
fixed: 현재 보여지는 화면으로부터 T B L R (*모바일 브라우저에서 지원이 불안정)
absolute: 부모 엘리먼트로부터 T B L R, 없으면 body
*/
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #8a8a8ab3;
}
.wrapModal {
/*
T B L R 은 부모로부터 기준점
transform은 내 크기로 부터 기준점
*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
max-height: 100vh;
/*
단위
em : 최상위 속성에 값을 상속받아 %단위로 비례함 1.2 -> 120%
rem : em하위에 em이 중첩되면 중첩이 누적되기 때문에 root로부터 계산할 수 있도록 함(일반적으로 html태그에 붙이는듯)
vh, vw : fixed 조건에서 각 높,너비를 1/100로 표현
vmin, vmax : 화면의 높,너비 값 중 min과 max
*/
overflow-y: scroll;
}
.modal {
width: 300px;
}
.level {
z-index: 2;
}