定位超大的 jQuery.UI 对话框太远了

Question

我有一个仪表板屏幕，其中充满了排列成三列的对话框。它运作得很好。

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 像素的对话框，当屏幕渲染时，对话框的最底部边缘显示在屏幕顶部。

为什么会发生这种情况？

Answer 1

您需要设置 height 属性，否则为 auto。 maxHeight 属性用于可由用户调整大小的对话框。