<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트로 모달창 만들기</title>
<style>
#shadow {
position: absolute;
top:0; left: 0;
background: black;
opacity: 0.65;
display: none;
}
#modal {
background : yellow;
width : 350px;
height : 250px;
position : absolute;
display: none;
}
</style>
</head>
<body>
<h1>자바스크립트로 모달창 만들기 </h1>
<p>뒷배경은 투명한 검정색 표현</p>
<p>검은 배경위로 모달창 표시</p>
<div>
<button type="button" id="mblbtn">모달창 띄우기</button>
</div>
<div id='shadow'></div>
<div id='modal'><button type="button" id="closebtn">모달창 닫기</button>
</div>
<script>
const mblbtn = document.getElementById('mblbtn');
const makeShadow = () => {
let shadow = document.getElementById('shadow')
// shadow.style.width = window.innerWidth + 'px';
// shadow.style.height = window.innerHeight + 'px';
shadow.style.width = '100%' ;
shadow.style.height = '100%';
shadow.style.display = 'block';
}; //검은 뒷배경 생성
const makeModal = () => {
let modal = document.getElementById('modal');
let cx = (window.innerWidth/2) - (300/2) ;
let cy = (window.innerHeight/2) - (200/2) ;
modal.style.top = '30%' ;
modal.style.left = '30%' ;
modal.style.display = 'block';
};
const makeModalBtn = () => {
let clsbtn = document.getElementById('closebtn');
clsbtn.addEventListener('click', () => {
let shadow = document.getElementById('shadow');
let modal = document.getElementById('modal');
modal.style.display = 'none';
shadow.style.display = 'none';
});
};
mblbtn.addEventListener('click', ()=>{
makeShadow();
makeModal();
makeModalBtn();
});
// window.addEventListener('resize', () =>{
// // console.log('창 크기 바뀜');
// let modal = document.getElementById('modal');
// let shadow = document.getElementById('shadow')
// if (shadow.style.display == 'none') return; // 리사이즈 걸리면 함수 실행 중지
//
//
// let cx = (window.innerWidth/2) - (300/2) ;
// let cy = (window.innerHeight/2) - (200/2) ;
//
// modal.style.top = cy + 'px';
// modal.style.left = cx + 'px';
//
//
//
// shadow.style.width = window.innerWidth + 'px';
// shadow.style.height = window.innerHeight + 'px';
// });
</script>
</body>
</html>