jQuery 모달 버튼이 스크롤바 뒤에 숨겨져 있습니다.

jQuery 팝업 모달에 스크롤바를 추가 했으므로 이제는 닫기 버튼을 다루고 있습니다. 누군가 스크롤 바 앞에 버튼을 앞으로 가져 오는 방법을 설명해 주시겠습니까? 미리 감사드립니다.jQuery 모달 버튼이 스크롤바 뒤에 숨겨져 있습니다.

전 :

Before scroll (overflow) added

후 :

After scroll (overflow) added

CSS는 :

/* Close Button */ 
.popup-close { 
    width:30px; 
    height:30px; 
    padding-top:4px; 
    display:inline-block; 
    position:absolute; 
    top:0px; 
    right:0px; 
    transition:ease 0.25s all; 
    -webkit-transform:translate(50%, -50%); 
    transform:translate(50%, -50%); 
    border-radius:1000px; 
    background:rgba(0,0,0,0.8); 
    font-family:Arial, Sans-Serif; 
    font-size:20px; 
    text-align:center; 
    line-height:100%; 
    color:#fff;; 
} 

.popup-close:hover { 
    -webkit-transform:translate(50%, -50%) rotate(180deg); 
    transform:translate(50%, -50%) rotate(180deg); 
    background:rgba(0,0,0,1); 
    text-decoration:none; 
} 

.popup-inner { 
    color: black; 
    height: 500px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    position: fixed; 
}

HTML :

<div class="popup" data-popup="popup-1"> 

    <div class="popup-inner"> 

     <p> content</p> 

     <p><a data-popup-close="popup-1" href="#">Close</a></p> 
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
    </div> 
</div>

출처

2017-04-17 Jordan Wood