2016-07-30 23 views
0

Problem: Wenn Reveal Daten größer als Fenster Höhe ist, bewegt Scrollen das Schließen-Symbol von der Seite. Ich möchte es klebrig machen, so dass Sie immer die Möglichkeit haben, die Seite zu schließen, ohne zurück zu scrollen.Sticky close-Taste für Foundation 6 offenbaren

Ich habe versucht, die Stiftung 6 .sticky Beispiel in die Enthüllung zu laden, aber keiner meiner Versuche war erfolgreich.

Dies ist, was ich denke, sollte funktionieren, die über Ajax in den Laibungscontainer <div id="modal2" style="height: 100%"></div> geladen wird. Leider scrollt die Schließen-Schaltfläche nur mit dem Inhalt.

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

Fehle ich etwas? Hat sonst jemand einen Sticky-Close-Button in einem Reveal bekommen?

Antwort

0

Das grundlegende Verhalten von Reveal besteht darin, zu schließen, wenn der Benutzer außerhalb des Reveal-Containers klickt, sodass ein Benutzer die Reveal bereits schnell verlassen kann.

Sie können jedoch auch position: fixed; für das Element close verwenden.

Das würde es in der gleichen Stelle halten, während das modale auf und ab scrollte.

CSS

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

e.g. in a Fiddle

position: fixed; zu verwenden ist ein bisschen wie ein Schmerz für Styling und Handys, aber das hängt von Ihrem speziellen Design wird abhängig.

Verwandte Themen