팝업

  

    
    
    
    
  
<a href="javascript:void(0)" class="pop-btn1" >

</a>

<div id="popup1" class="pop_wrap">
    <div class="pop-inner">

      <div class="pop-close" onclick="pop_close();">✕</div>
    </div>
  </div>

 

  

    
    
    
    
  
.pop_wrap {display: none;position: fixed;top: 0;left: 0;background: rgb(0, 0, 0, 0.5);width: 100%;  height: 100%;  z-index: 9999;}
.pop_wrap .pop-inner {position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 90%;  max-width: 570px;   padding: 50px 20px;  background: #fff;  line-height: 25px;}
.pop-close {  position: absolute;  top: -30px;  right: 0px;  width: 30px;  height: 30px;  cursor: pointer; font-size: 30px; color: #fff;}
.pop-close i{font-size: 24px;}

 

  

    
    
    
    
  
<script>
    $(function() {
        for (let i = 1; i <= 33; i++) {
            $(".pop-btn" + i).on("click", function() {
                $("#popup" + i).fadeIn(500);
            });
        }
    });

    function pop_close() {
        for (let i = 1; i <= 33; i++) {
            $("#popup" + i).fadeOut(300);
        }
    }
</script>