Menu icon Foundation
Reveal modal bug with no animation & scrolling, version 5.1.1.

I had some problems with reveal modal. I need to show it without position:fixed, because I want a scrolling option if dialog is too big. So with position as is (absolute) there was a problem, that dialog would always appear as you are on top of the page even though you scrolled down. After some research I come to find out it was due to turning off the animation and bug in the code. The problem as I see it is that if there is no animation the css.top does not get set. I currently fixed it by adding the top position no matter what.

I have also reported this issue:
https://github.com/zurb/foundation/issues/6297

        css.top = $(window).scrollTop() + el.data('css-top') + 'px'; // ADDED LINE
        var animData = getAnimationData(settings.animation);
        if (!animData.animate) {
          this.locked = false;
        }
        if (animData.pop) {
          css.top = $(window).scrollTop() - el.data('offset') + 'px';
          var end_css = {
            top: $(window).scrollTop() + el.data('css-top') + 'px',
            opacity: 1
          };

          return setTimeout(function () {

reveal modalscroll5.1.1.animationrevealmodal

I had some problems with reveal modal. I need to show it without position:fixed, because I want a scrolling option if dialog is too big. So with position as is (absolute) there was a problem, that dialog would always appear as you are on top of the page even though you scrolled down. After some research I come to find out it was due to turning off the animation and bug in the code. The problem as I see it is that if there is no animation the css.top does not get set. I currently fixed it by adding the top position no matter what.

I have also reported this issue:
https://github.com/zurb/foundation/issues/6297

        css.top = $(window).scrollTop() + el.data('css-top') + 'px'; // ADDED LINE
        var animData = getAnimationData(settings.animation);
        if (!animData.animate) {
          this.locked = false;
        }
        if (animData.pop) {
          css.top = $(window).scrollTop() - el.data('offset') + 'px';
          var end_css = {
            top: $(window).scrollTop() + el.data('css-top') + 'px',
            opacity: 1
          };

          return setTimeout(function () {
Rafi Benkual almost 5 years ago

We'll take a look at in on GitHub. If it's not a bug, we'll close it there and continue the conversation here.

Chris Holaday over 4 years ago

I ran into this same issue and have created a pull request with my solution:

https://github.com/zurb/foundation/pull/6512

Rafi Benkual over 4 years ago

Awesome Chris! We're going to test it soon. Thanks!