祖尔布基金会 显示模态 从窗口底部打开

Question

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

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

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

如果我

正确理解了你的问题，你可能想尝试用fixed定位来覆盖 Reveal 的absolute位置。

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

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

Answer 2

关于@chrisjordanme答案的一些注释，我也在基金会论坛和 github 上看到了这些注释。

1. 我想你会发现背景的暗色/灯箱效果不在模态后面，但仍然笨拙地位于页面顶部（在你应用固定定位之前模态的位置）。

2. 如果你想使用close_on_background_click: true，这不会很好地发挥作用，我个人认为你应该这样做 - 我讨厌网站强迫我花费所有额外的努力来移动我的光标来单击微小的关闭图标。那只是糟糕的用户体验人。

所以;基本上只要确保你也把固定的位置应用到背景上:)

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