Question

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

我一直在尝试使用揭示js编辑open函数（原始代码）。

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

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

我遇到了一个问题，我会从长页面底部的链接触发模态，但模式是向上打开（用户必须向上滚动才能实际进入模态）。

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

Answer 2

关于@ chrisjordanme的答案的一些注释，我在foundation forum和github中也看到了这一点。

我认为您会发现背景的暗/灯箱效果不在模态后面，但仍然位于页面顶部的笨拙（模态在应用固定定位之前））。
如果您想使用我个人认为应该使用的close_on_background_click: true，这并不是很好用 - 当网站迫使我花费所有额外的努力时，我讨厌它/ strong>移动光标以单击微小的关闭图标。这只是一个糟糕的UX人。

因此;基本上只是确保你也将固定位置应用于背景：）

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

Zurb基金会揭示模态从窗口底部打开

2 个答案: