Zurb foundation Reveal Modal Open from window bottom

Question

im trying to get the reveal modal to pop up from the bottom of the window but i just cant get it working, any help would be great.

I have been trying to edit the open function with the reveal js which is below(original code).

Thanks P

open : function (target, ajax_settings) {
  if (target) {
    if (typeof target.selector !== 'undefined') {
      var modal = $('#' + target.data('reveal-id'));
    } else {
      var modal = $(this.scope);

      ajax_settings = target;
    }
  } else {
    var modal = $(this.scope);
  }

  if (!modal.hasClass('open')) {
    var open_modal = $('[data-reveal].open');

    if (typeof modal.data('css-top') === 'undefined') {
      modal.data('css-top', parseInt(modal.css('top'), 10))
        .data('offset', this.cache_offset(modal));
    }

    modal.trigger('open');

    if (open_modal.length < 1) {
      this.toggle_bg();
    }

    if (typeof ajax_settings === 'undefined' || !ajax_settings.url) {
      this.hide(open_modal, this.settings.css.close);
      this.show(modal, this.settings.css.open);
    } else {
      var self = this,
          old_success = typeof ajax_settings.success !== 'undefined' ? ajax_settings.success : null;

      $.extend(ajax_settings, {
        success: function (data, textStatus, jqXHR) {
          if ( $.isFunction(old_success) ) {
            old_success(data, textStatus, jqXHR);
          }

          modal.html(data);
          $(modal).foundation('section', 'reflow');

          self.hide(open_modal, self.settings.css.close);
          self.show(modal, self.settings.css.open);
        }
      });

      $.ajax(ajax_settings);
    }
  }
},

 show : function (el, css) {
  // is modal
  if (css) {
    if (el.parent('body').length === 0) {
      var placeholder = el.wrap('<div style="display: none;" />').parent();
      el.on('closed.fndtn.reveal.wrapped', function() {
        el.detach().appendTo(placeholder);
        el.unwrap().unbind('closed.fndtn.reveal.wrapped');
      });

      el.detach().appendTo('body');
    }

    if (/pop/i.test(this.settings.animation)) {
      css.top = $(window).scrollTop() - el.data('offset') + 'px';
      var end_css = {
        top: $(window).scrollTop() + el.data('css-top') + 'px',
        opacity: 1
      };

      return this.delay(function () {
        return el
          .css(css)
          .animate(end_css, this.settings.animation_speed, 'linear', function () {
            this.locked = false;
            el.trigger('opened');
          }.bind(this))
          .addClass('open');
      }.bind(this), this.settings.animation_speed / 2);
    }

    if (/fade/i.test(this.settings.animation)) {
      var end_css = {opacity: 1};

      return this.delay(function () {
        return el
          .css(css)
          .animate(end_css, this.settings.animation_speed, 'linear', function () {
            this.locked = false;
            el.trigger('opened');
          }.bind(this))
          .addClass('open');
      }.bind(this), this.settings.animation_speed / 2);
    }

    return el.css(css).show().css({opacity: 1}).addClass('open').trigger('opened');
  }

  // should we animate the background?
  if (/fade/i.test(this.settings.animation)) {
    return el.fadeIn(this.settings.animation_speed / 2);
  }

  return el.show();
},

Answer 1

If I'm understanding your question correctly, you may want to try overriding Reveal's absolute position with fixed positioning.

I had an issue where I would trigger the modal from a link at the bottom of a long page, but the modal was opening way up top (the user had to scroll back up to actually get to the modal).

.reveal-modal {
   position: fixed; /* <- */
}

Answer 2

Some notes on @chrisjordanme's answer, which I also saw suggested in the foundation forum , and github .

1. I think you'll find that the dark/lightbox effect of the background is not behind the modal, but is still sits awkwardly at the top of the page (where the modal was before you applied fixed positioning).

2. This doesn't play out well if you want to use close_on_background_click: true , which I personally think you should - I hate it when websites force me to expend all that extra effort to move my cursor to click the tiny little close icon. That's just bad UX man.

So; basically just make sure you also apply the fixed positioning to the background as well :)

.reveal-modal, .reveal-modal-bg {
   position: fixed;
}