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

公開の基本的な動作は、ユーザーが公開コンテナの外側をクリックした場合に終了するため、ユーザーは既に公開をすぐに終了できます。

ただし、close要素でposition: fixed;を使用することもできます。

これは、モーダルが上下にスクロールしている間、同じ場所にそれを保持します。

CSS

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

e.g. in a Fiddle

position: fixed;を使用するには、スタイリングや携帯電話のための痛みのビットですが、それはあなたの特定の設計に依存します。