크기가 큰 jQuery.UI 대화 상자 지정하기 WAY off

대화 상자가 3 열로 배열 된 대시 보드 화면이 있습니다. 그것은 꽤 잘 작동합니다.크기가 큰 jQuery.UI 대화 상자 지정하기 WAY off

var leftContent; 
var middleContent; 
var rightContent; 
var verticalOffset; 

$(document).ready(function() { 
    leftContent = $('#columnTop'); 
    middleContent = $('#columnTop'); 
    rightContent = $('#columnTop'); 
    verticalOffset = (jQuery.browser.safari) ? 40 : 5; 

    includeJavascriptFile('inlineForumFunctions.js'); 

    $('.dialog').each(function(){ 
     var p = ''; 
     if ($(this).hasClass('dialogLeft')) p = 'posLeft'; 
     if ($(this).hasClass('dialogCenter')) p = 'posCenter'; 
     if ($(this).hasClass('dialogRight')) p = 'posRight'; 

     $(this).dialog({ 
      title: $(this).attr('title'), 
      maxHeight: 400 
     }).parent().attr('id', $(this).attr('id') + 'Dialog') 
     .addClass('cfDialog').addClass(p); 
    }); 

    $('.cfDialog').css('width', '30%'); 

    $('.cfDialog.posLeft').each(function(){ 
     addToLeftColumn($(this).attr('id')); 
    }); 

    $('.cfDialog.posCenter').each(function(){ 
     addToCenterColumn($(this).attr('id')); 
    }); 

    $('.cfDialog.posRight').each(function(){ 
     addToRightColumn($(this).attr('id')); 
    }); 

    $('.menu ul').hover(function(){ 
     $(this).maxZIndex(); 
     $(this).children().maxZIndex(); 
    }); 

}); 

$.maxZIndex = $.fn.maxZIndex = function(opt) { 
    /// <summary> 
    /// Returns the max zOrder in the document (no parameter) 
    /// Sets max zOrder by passing a non-zero number 
    /// which gets added to the highest zOrder. 
    /// </summary> 
    /// <param name="opt" type="object"> 
    /// inc: increment value, 
    /// group: selector for zIndex elements to find max for 
    /// </param> 
    /// <returns type="jQuery" /> 
    var def = { 
     inc: 10, 
     group: "*" 
    }; 
    $.extend(def, opt); 
    var zmax = 0; 
    $(def.group).each(function() { 
     var cur = parseInt($(this).css('z-index')); 
     zmax = cur > zmax ? cur : zmax; 
    }); 
    if (!this.jquery) 
     return zmax; 

    return this.each(function() { 
     zmax += def.inc; 
     $(this).css("z-index", zmax); 
    }); 
} 

function addToLeftColumn(elementId){ 
     $('#'+elementId) 
     .position({ 
      my: 'left top', 
      at: 'left bottom', 
      of: leftContent, 
      offset: '0 ' + verticalOffset 
     }); 
    if ($('#'+elementId).html().length > 0){ 
     leftContent = $('#'+elementId); 
    } 
} 

function addToCenterColumn (elementId){ 
     $('#'+elementId) 
     .position({ 
      my: 'center top', 
      at: 'center bottom', 
      of: middleContent, 
      offset: '0 ' + verticalOffset 
     }); 
     alert(middleContent.attr('id')); 
     middleContent = $('#'+elementId); 

} 

function addToRightColumn (elementId){ 
     $('#'+elementId) 
     .position({ 
      my: 'right top', 
      at: 'right bottom', 
      of: rightContent, 
      offset: '0 ' + verticalOffset 
     }); 
    if ($('#'+elementId).html().length > 0){ 
     rightContent = $('#'+elementId); 
    } 
}

... 그러나 maxHeight 속성은 무시 된 것 같습니다. 400 픽셀보다 큰 하나의 대화 상자가 있고 화면이 렌더링되면 대화 상자의 맨 아래 가장자리가 화면 상단에 표시됩니다.

왜 이런 일이 발생합니까?

출처

2012-01-29 Jeremy Holovacs