jQuery - 对话框自动调整动态内容的大小并保持中心位置 [英] jQuery - Dialog auto-resize on dynamic content and maintain center position

问题描述

我有一个 jQuery 对话框，我正在使用 Ajax 加载内容.

I have a jQuery Dialog box and Am loading the content using Ajax.

对话框最初位于页面的中心.这里的问题是，由于它是动态内容，数据的大小是未知的.所以，当我得到大数据时，对话框只在底部增长，即对话框在底部展开，顶部仍然在同一位置.

The Dialog is initially in the center of the page. The problem , here is , Since its a dynamic content, the size of the data is unknown. So, When I get large data, the dialog grows only in the bottom side i.e. The dialog expands in the bottom, and the top is still in the same position.

我想要的是

加载数据时，对话框应在两个方向(顶部和底部)展开，以便内容可见，无需滚动.

When the data is loaded, the dialog should expand in both the direction (top and bottom ), so that the content is visible without scrolling.

推荐答案

默认对话框是绝对相对定位的.

The default dialog is absolutely relative positioned.

对话框可能会在提供自动高度时展开，但当页面滚动时，对话框会自行重新定位.

The dialog may expand on giving auto height, but when the page is scrolled , the dialog is reposition itself.

这样做的唯一方法是将这些样式应用于对话框

The only way to do this is, apply these styles to the dialog

1. 在窗口中定位对话框

1. Position the dialog in the Window by

position : ['center',<与顶部的距离>]

使用 css 样式固定位置

Fix the position by using css style

.fixed-dialog { position:"fixed" }

将此类添加到对话框中

dialogClass : '固定对话框'

所以，对话框看起来像

$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });

这篇关于jQuery - 对话框自动调整动态内容的大小并保持中心位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！