javascript - Zurb 基金会 Reveal Modal 从窗口底部打开

Question

我试图让显示模式从窗口底部弹出，但我就是无法让它工作，任何帮助都会很棒。

我一直在尝试使用下面的reveal js(原始代码)编辑打开函数。

谢谢

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

如果我正确理解您的问题，您可能需要尝试使用固定定位覆盖Reveal的绝对位置。

我遇到了一个问题，我可以从长页面底部的链接触发模式，但模式是在顶部打开的(用户必须向上滚动才能真正到达模式)。

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