基础6粘性关闭按钮显示

Question

问题：当显示数据高于窗口高度时，滚动会将关闭图标移出页面。我想让它变得粘稠，以便您始终可以选择关闭页面而不必滚动回顶部。

我曾尝试将基础示例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> 

我错过了什么吗？其他人是否能够在揭密中获得粘性关闭按钮？

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;是有点对造型和手机痛苦的，但将要根据您的具体设计。