Zurb基础显示模态从窗口底部打开

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位置fixed定位。

我有一个问题，我会触发模式从一个长页面底部的链接，但模式是开放的方式顶部（用户不得不回滚实际到达模态）。

​​

Answer 2

的一些注意事项上@ chrisjordanme的答案，我也看到了在foundation forum和github建议。

1. 我想你会发现背景的暗/灯箱效果不是模态的背后，却仍然在页面的顶部（其中模式是您应用的固定定位之前）坐在笨拙。我讨厌网站逼我花费所有额外的努力移动我的光标点击小小的 -

2. ，如果你想使用close_on_background_click: true，我个人认为你应该这并没有发挥出很好关闭图标。这真是糟糕的用户体验。

因此;基本上只要确保您也将固定位置应用于背景以及:)

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