기초 6 끈적 닫기 버튼

Question

문제점 : 계시 데이터가 창 높이보다 큰 경우, 스크롤하면 페이지에서 닫기 아이콘이 이동합니다. 나는 끈적 끈적하게 만들어서 맨 위로 스크롤하지 않고 페이지를 닫을 수있는 옵션을 항상 갖고 싶습니다.

예를 들어 공개로 6 .sticky 예제를로드하려고했지만 성공한 시도는 없습니다.

이것은 내가 작동해야한다고 생각합니다. 이것은 공개 컨테이너 <div id="modal2" style="height: 100%"></div>을 통해 ajax를 통해로드됩니다. 불행히도 닫기 버튼은 내용과 함께 스크롤됩니다.

<script> 
    // this script cannot be located in the layouts.js, 
    // because the trigger doesn't exist at page load. 

    $('#close-modal2').click(function(){ 
     // $('#modal2').foundation('close'); didn't work for some reason. 
     // 'open' closes all other modals, so it accomplishes what I need. 
     $('#modal').foundation('open'); 
    }); 

</script> 



<div> 
    <button id="close-modal2" class="close-button sticky" 
      aria-label="Close reveal" type="button" data-sticky> 
     <span aria-hidden="true">&times;</span> 
    </button> 
</div> 

<div id="paragraph-wrapper" data-sticky-container> 
    <div class="row"> 
     <div class="small-11 small-centered columns"> 
      <div> Lots of content here, enough to overflow window...</div> 
      <div> Losts of content here..... etc.</div> 
     </div> 
    </div> 
</div> 

나는 뭔가가 있습니까? 다른 누군가가 공개적으로 끈적 거리는 닫기 버튼을 얻을 수 있었습니까?

Answer 1

공개의 기본 동작은 사용자가 공개 컨테이너 바깥을 클릭하면 닫히기 때문에 사용자는 이미 공개 상태에서 빠져 나갈 수 있습니다.

그러나 닫기 요소에 position: fixed;을 사용할 수도 있습니다.

모달이 위아래로 스크롤되는 동안 동일한 위치에 유지됩니다.

CSS

#modal2 > .close-button { 
    position: fixed; 
    top: 1rem; //or whatever 
    right: 2rem; //or whatever 
} 

e.g. in a Fiddle

position: fixed; 사용은 스타일과 모바일을위한 약간의 고통이다하지만 특정 디자인에 따라 될 것입니다.