자바스크립트 팝업 CSS visibility hidden과 visible 이용

Title

X

content

body{position:relative; }

.popWrap-bg{ position:absolute; top:0; left:0; background:rgba(0,0,0, 0.5); width:100%; height:100vh; display:flex; justify-content:center; align-items:center;
  visibility: hidden;  
}

.popWrap{ width:400px; height:500px; background:rgba(255,255,255, 0.9); }
.popTitle{ display:flex; justify-content:space-between;  background:#aaae88; }
.popTitle > p {display:block; padding:20px;}
.popContent{padding:20px;}
#close{cursor:pointer; border:1px solid #eeaa00; }
button{font-size:3rem;}

const popupCall = () => {
  //const btnbtn = document.getElementById('clickBtn');
 const bg = document.getElementsByClassName('popWrap-bg');
  bg[0].style.visibility = "visible";
}

function closeCall(){
  const bgbg = document.getElementById('popWrapBG');
  bgbg.style.visibility = "hidden";
}

https://codepen.io/keepgoing-noah/pen/OJvqmVd

popup

간단하게 만들어본 팝업, CSS  visibility: hidden과 visible 이용