[Java Script] Layout popup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#layer_popup_wrap {
width:100vw;
height: 100vh;
background: black;
opacity:0.6;
position:fixed;
top:0;
display:none;
}
#layer_popup{
position:relative;
width:500px;
height: 500px;
background: #fff;
left:50%;
top:50%;
transform : translate(-50%, -50%);
}
.close {
background: black;
color: #fff;
width: 80px;
height: 30px;
line-height: 27px;
border-radius: 15px;
display:inline-block;
text-align :center;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn">레이어팝업</button>
<!---layer popup -->
<div id="layer_popup_wrap" style="display: none;">
<div id="layer_popup"> 0
이 부분에 내용이 나올겁니다.
<span class="close">
닫기 버튼
</span>
</div>
</div>
<!---layer popup-->
<script type="text/javascript">
let layerBtn=document.querySelector('#btn');
let closeBtn=document.querySelector('.close');
//Element.addEventListner(이벤트명:string, 콜백함수:Function()); )
layerBtn.addEventListener('click',layerFn);
closeBtn.addEventListener('click',layerFn);
function layerFn(){
let popup=document.querySelector('#layer_popup_wrap');
//삼항연산자
let type = (popup.style.display =='none') ? 'block' : 'none' ;
//물음표는 if문임
popup.style.display = type;
}
</script>
</body>
</html>