的JavaScript模态是屏幕

Question

太大我创建使用Prototype JavaScript框架和下面的对象模态窗口：

var Modal = Class.create({ 
    animate: function() { 
     this.step = (this.step + 1) % 31; 

     if (this.throbber) { 
      this.throbber.setStyle({ 
       backgroundPosition: 'center ' + this.step * -33 + 'px' 
      }); 
     } 
    }, 
    destroy: function() { 
     if (this.interval_id) { 
      window.clearInterval(this.interval_id); 
     } 

     if (this.timeout_id) { 
      window.clearTimeout(this.timeout_id); 
     } 

     if (this.overlay.parentNode) { 
      this.overlay.remove(); 
     } 

     if(this.window.select('select')){ 
      this.window.select('select').each(function(ele){ 
       Element.remove(ele);     
      }); 
     } 

     this.window.select('*').invoke('remove'); 

     if (this.window.parentNode) { 
      this.window.remove(); 
     } 
    }, 
    initialize: function (element) { 
     this.launch_element = element; 

     this.overlay = new Element('div', {'class': 'modal_overlay'}); 

     $$('body').first().insert(this.overlay); 

     this.close = new Element('a', { 
      'class': 'modal_close' 
     }).insert('Close'); 

     this.close.observe('click', this.destroy.bind(this)); 

     this.window = new Element('div', {'class': 'modal_window'}); 

     if(this.window.select('select')){ 
      this.window.select('select').each(function(ele){ 
       Element.remove(ele);     
      }); 
     } 

     this.window.select('*').invoke('remove'); 

     this.window.insert(this.close); 

     this.section = new Element('div', {'class': 'section'}); 

     this.show_throbber(); 

     this.window.insert(this.section); 

     $$('body').first().observe('keypress', function (e) { 
      var key_code = window.event ? event.keyCode : e.keyCode; 

      var esc = window.event ? 27 : e.DOM_VK_ESCAPE; 

      if (key_code === esc) { 
       this.destroy(); 
      } 
     }.bind(this)); 

     $$('.container').first().insert(this.window); 

     if (Prototype.Browser.IE) { 
      this.scroll_window(); 

      Event.observe(window, 'scroll', this.scroll_window.bind(this)); 
     } 
    }, 
    remove_throbber: function() { 
     if (this.interval_id) { 
      window.clearInterval(this.interval_id); 
     } 

     if (this.timeout_id) { 
      window.clearTimeout(this.timeout_id); 
     } 

     this.throbber.remove(); 
    }, 
    scroll_window: function() { 
     var height, offsets; 

     offsets = document.viewport.getScrollOffsets(); 

     this.overlay.setStyle({ 
      left: offsets.left + 'px', 
      top: offsets.top + 'px' 
     }); 

     height = document.viewport.getHeight(); 

     this.window.setStyle({ 
      top: offsets.top + Math.round(17 * height/100) + 'px' 
     }); 
    }, 
    show_throbber: function (text) { 

     if(this.section.select('select')){ 
      this.section.select('select').each(function(ele){ 
       Element.remove(ele);     
      }); 
     } 

     this.section.select('*').invoke('remove'); 

     if (!text) { 
      text = 'Loading'; 
     } 

     this.throbber = new Element('div', { 
      'class' : 'modal_throbber' 
     }).insert(new Element('p').insert(text + '...')); 

     this.section.insert(this.throbber); 

     this.step = 0; 

     this.interval_id = window.setInterval(this.animate.bind(this), 50); 

     this.complete = false; 

     this.timeout_id = window.setTimeout(this.timeout.bind(this), 20000); 
    }, 
    timeout: function() { 
     var div, p, span; 

     if (!this.complete) { 
      if (this.interval_id) { 
       window.clearInterval(this.interval_id); 
      } 

      if (this.throbber) { 
       this.remove_throbber(); 

       span = new Element('span', {'class': 'icon icon-delete'}); 

       p = new Element('p', {'class': 'first'}).update(span); 

       p.insert('There seems to be something wrong with eSP. ' + 
        'Please try again later.'); 

       div = new Element('div', {'class': 'error'}).update(p); 

       this.section.update(div); 
      } 

      if (this.timeout_id) { 
       window.clearTimeout(this.timeout_id); 
      } 
     } 
    } 
}); 

，并铺有以下样式：

.modal_overlay { 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 2999; 
    opacity: 0.5; 
    background: #000; 
} 

* html .modal_overlay { 
    filter: alpha(opacity=50); 
    position: absolute; 
    zoom: 1; 
} 

.modal_window { 
    display: block; 
    position: fixed; 
    top: 17%; 
    z-index: 3000; 
} 

* html .modal_window { 
    position: absolute; 
} 

.modal_close { 
    background: url('/images/close.gif') no-repeat scroll 0 0; 
    height: 26px; 
    cursor: pointer; 
    position: absolute; 
    right: -13px; 
    top: -8px; 
    width: 26px; 
    text-indent: -10000px; 
} 

.modal_throbber { 
    background: url('/images/throbber.png') no-repeat top center; 
    padding-top: 32px; 
} 

.modal_throbber p { 
    background: #fff; 
    text-align: center; 
} 

我们现在从客户处获得报告，当模式窗口比屏幕更高时，他们不能向下滚动查看模式窗口内容的底部。

这是我们确保太多的信息没有显示在模式或是否有更好，更技术性的修复？

Answer 1

您可以在模式窗口上输入max-height，并在overflow:scroll上输入max-height。