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

问题描述

我有一个jQuery对话框，并使用Ajax加载内容。

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

我想要的是

当加载数据时，对话框应该在方向（顶部和底部）上展开，以便内容在没有滚动的情况下可见。 >

解决方案

默认对话框绝对相对定位。

对话框可能会扩展提供自动高度，但是当页面滚动时，对话框将重新定位。

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

1. 将对话框放在窗口中

   
   
   

   position：['center'，<距离顶部>]




2. css style

   
   
   

   .fixed-dialog {position：fixed}




3. 将此类添加到对话框

   
   
   

   dialogClass：'fixed-dialog'

所以，对话框看起来像

  $（'＃dialog-div'）对话框（{
 position：['center'，10]，
 dialogClass：fixed-dialog
}）; 
  

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.

What I want is

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. Position the dialog in the Window by

   position : ['center',<distance from top>]

2. Fix the position by using css style

   .fixed-dialog { position:"fixed" }

3. Add this class to the dialog

   dialogClass : 'fixed-dialog'

So, the dialog would look like

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

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