Question

我在调整jquery-ui对话框高度时遇到问题。我使用的是1.10.3版。我的对话框初始化如下所示：

 $('#dlgOnlineChange').dialog({        
    autoResize: true,
    autoOpen: false,
    modal: true,
    width: '800',
    height: 'auto',
    resizable: false,        
    title: "Details"
});

当对话框打开时，高度设置为自动，但对话框不够高，无法显示所有数据。在加载所有数据之前不会打开对话框，因此我不确定为什么会出现这种情况。如果我尝试硬编码这样的高度：

 $('#dlgOnlineChange').dialog({ 
    autoOpen: false,
    modal: true,
    width: '800',
    height: '900',
    resizable: false,        
    title: "Details"
});

对话框足够高但它仍然显示滚动条，但仅显示在对话框的顶部：

我的模态标记如下所示：

<div id="dlgOnlineChange" title="" style="display: none;">
    <div class="modal-body">
        @using (Html.BeginForm("UpdateOnlineChange", "Contact", FormMethod.Post, new { area = "Admin", id = "frmDlgOnlineChange", @role = "form" }))
        {
        <div class="form-horizontal">
            <div class="row">
                <div class="col-md-8">
                    <div class="col-md-2">
                        <b>ID</b><br />
                        <div id="divId"></div>
                    </div>
                    <div class="col-md-3">
                        <b>NAME</b><br /><div id="divAName"></div>
                    </div>
                    <div class="col-md-3">
                        <b>EFFECTIVE DATE</b><br /><div id="divEffectiveDate"> </div>
                    </div>
                    <div class="col-md-4">
                        <b>SUBMITTED DATE</b><br /><div id="divDateSubmitted"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="col-md-6">
                    <div class="row currentinfo">
                        <div class="row">CURRENT INFORMATION</div>
                        <div class="row">
                            HOME ADDRESS:<br /><div id="divCurrentHomeAddress"></div>
                        </div>
                        <div class="row">
                            OFFICE ADDRESS:<br /><div id="divCurrentOfficeAddress"></div>
                        </div>
                        <div class="row">
                            MAILING ADDRESS:<br /><div id="divCurrentMailingAddress"></div>
                        </div>
                        <div class="row">
                            PUBLIC ADDRESS:<br /><div id="divCurrentPublicAddress"></div>
                        </div>
                        <div class="row">
                            PHONE(S):<br />
                            <div class="row">
                                Home:&nbsp;<span id="divCurrentHomePhone"></span>
                            </div>
                            <div class="row">
                                Office:&nbsp;<span id="divCurrentOfficePhone"></span>
                            </div>
                            <div class="row">
                                Mobile:&nbsp;<span id="divCurrentMobilePhone"></span>
                            </div>
                            <div class="row">
                                Fax:&nbsp;<span id="divCurrentFax"></span>
                            </div>
                            <div class="row">
                                Other:&nbsp;<span id="divCurrentOtherPhone"></span>
                            </div>
                        </div>
                        <div class="row">
                            EMAIL ADDRESS(ES):<br />
                            <div class="row">
                                Primary:&nbsp;<span id="divCurrentPrimaryEmail"></span>
                            </div>
                            <div class="row">
                                Secondary:&nbsp;<span id="divCurrentSecondaryEmail"></span>
                            </div>
                            <div class="row">
                                Other:&nbsp;<span id="divCurrentOtherEmail"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row submittedInfo">
                    <div class="row">SUBMITTED INFORMATION</div>
                    <div class="row">
                        HOME ADDRESS:<br /><div id="divSubmittedHomeAddress"></div>
                    </div>
                    <div class="row">
                        OFFICE ADDRESS:<br /><div id="divSubmittedOfficeAddress"></div>
                    </div>
                    <div class="row">
                        MAILING ADDRESS:<br /><div id="divSubmittedMailingAddress"></div>
                    </div>
                    <div class="row">
                        PUBLIC ADDRESS:<br /><div id="divSubmittedPublicAddress"></div>
                    </div>
                    <div class="row">
                        PHONE(S):<br />
                        <div class="row">
                            Home:&nbsp;<span id="divSubmittedHomePhone"></span>
                        </div>
                        <div class="row">
                            Office:&nbsp;<span id="divSubmittedOfficePhone"></span>
                        </div>
                        <div class="row">
                            Mobile:&nbsp;<span id="divSubmittedMobilePhone"></span>
                        </div>
                        <div class="row">
                            Fax:&nbsp;<span id="divSubmittedFaxPhone"></span>
                        </div>
                        <div class="row">
                            Other:&nbsp;<span id="divSubmittedOtherPhone"></span>
                        </div>
                    </div>
                    <div class="row">
                        EMAIL ADDRESS(ES):<br />
                        <div class="row">
                            Primary:&nbsp;<span id="divSubmittedPrimaryEmail"></span><br />
                        </div>
                        <div class="row">
                            Secondary:&nbsp;<span id="divSubmittedSecondaryEmail"></span><br />
                        </div>
                        <div class="row">
                            Other:&nbsp;<span id="divSubmittedOtherEmail"></span><br />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        }
    </div>
</div>

有人可以帮我弄清楚这里发生了什么吗？

Answer 1

您可以改为获得窗口高度：

$('#dlgOnlineChange').dialog({        
autoResize: true,
autoOpen: false,
modal: true,
width: '800',
height: window.innerHeight,
resizable: false,        
title: "Details"});

Answer 2

我在对话框初始化中添加了位置，现在正确调整大小。我也删除了高度。对话框初始化现在看起来像这样：

$('#dlgOnlineChange').dialog({ 
    autoOpen: false,
    modal: true,
    width: '800',        
    resizable: false,        
    title: "Details",
    position: [($(window).width() / 2), 150]
});

我不确定为什么会这样，但我现在正在使用它。如果那里有一个解决方案，我肯定愿意接受更好的解决方案。

jquery-ui对话框自动高度

2 个答案: