popup(script)

**CSS

        .popup-wrap{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            
            background: rgba(0,0,0,.5);
        }
        .popup-content{
            padding: 20px;
            position: absolute;
            background: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            height: 300px;
        }
        
        .close{
            cursor: pointer;
        }

 

 

**HTML

   <div class="content">
       텍스트 내용
   </div>
   
   <div id="popupWrap" class="popup-wrap">
       <div class="popup-content">
          <div>popup content</div>
           <span class="close">&times;</span>
       </div>
   </div>

 

**SCRIPT

     const popup = document.getElementById('popupWrap');
     const closeBtn = document.getElementsByClassName('close')[0];
       
       onload = function() {
           popup.style.display = "block";
       }
       
       closeBtn.onclick = function(){
           popup.style.display = "none";
       }
       
//       사용자가 팝업창 바깥 부분을 클릭했을 때도 닫히게 해주는 설정
       
       window.onclick = function(e) {
           if (e.target == popup) {
               popup.style.display = "none";
           }
       }