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; 
}