Foundation 5 - top position of reveal modal

Question

I was not able to find how to change the position for top for the latest reveal modal in foundation 5. Seems I have to make a change in the *.js file, but where?

Answer 1

If you are encountering the issue that the top position of the modal is not matching your needs, try to add the following to your css.

.reveal-modal-bg {
        position: fixed;
    }
    .reveal-modal {
        top: 150px !important;
    }

This will make shure that your modal and your modal background are always on top - and not somewhere off the viewport.

The thing is that - as I think, reveal positions it self under the position you have clicked with the mouse. So if you open the modal with a click on a link at the bottom of your page, it opens Npx under the point you have clicked. This caused my modal to cinda vanish of the viewport. But I have fixed it with the css code I posted above.

Hope It helps you.

---

Now to your original Question. If you want to change the Javascript of the reveal modal, you will have to include the single js files of foundation - what means not the foundation/js/foundation.min.js but the single files you need in your project - eg. foundation/js/foundation/foundation.js and foundation/js/foundation/foundation.reveal.js. Then you can make your changes in the foundation/js/foundation/foundation.reveal.js file. I think you are looking for the show method, which starts at Line 300.

---

Hope this helps, good luck! :)

Answer 2

You can change the Sass variable:

$reveal-position-top: rem-calc(100);

The default is 100 (modal opens 100px from top of screen).