Sticky close button for foundation 6 reveal

Question

Problem: when Reveal data is taller than window height, scrolling moves the close icon off the page. I want to make it sticky so that you always have the option of closing the page without scrolling back up to the top.

I have tried loading the foundation 6 .sticky example into the reveal, but none of my attempts have been successful.

This is what I think should work, which is loaded into the reveal container <div id="modal2" style="height: 100%"></div> via ajax. Unfortunately, the close button just scrolls with the content.

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

Am I missing something? Has anyone else been able to get a sticky close button in a reveal?

tymothytym tymothytym · Accepted Answer · 2016-09-16T13:45:32

The basic behaviour of the Reveal is to close if the user clicks outside of the reveal container, so a user does already have a quick way of exiting the reveal.

However, you could also use position: fixed; on the close element.

That would keep it in the same spot while the modal scrolled up and down.

CSS

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

e.g. in a Fiddle

Using position: fixed; is a bit of a pain for styling and mobiles but that will be depending on your particular design.

Sticky close button for foundation 6 reveal

1 Answers