基礎6粘性關閉按鈕顯示

問題：當顯示數據高於窗口高度時，滾動會將關閉圖標移出頁面。我想讓它變得粘稠，以便您始終可以選擇關閉頁面而不必滾動回頂部。基礎6粘性關閉按鈕顯示

我曾嘗試將基礎示例6 .sticky加載到顯示中，但我的嘗試都沒有成功。

這是我認爲應該工作，它通過ajax加載到揭示容器<div id="modal2" style="height: 100%"></div>。不幸的是，關閉按鈕只是滾動內容。

<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>

我錯過了什麼嗎？其他人是否能夠在揭密中獲得粘性關閉按鈕？

來源

2016-07-30 Tim Morton

顯示的基本行爲是關閉，如果用戶在顯示容器外單擊，所以用戶已經有快速退出顯示的方法。

但是，您也可以在關閉元素上使用position: fixed;。

當模式向上和向下滾動時，這將保持在同一個位置。

CSS

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

e.g. in a Fiddle

使用position: fixed;是有點對造型和手機痛苦的，但將要根據您的具體設計。

來源

2016-09-16 13:45:32 tymothytym

基礎6粘性關閉按鈕顯示

回答

相關問題