jQuery - Diálogo de cambio de tamaño automático en contenido dinámico y mantener la posición central

Question

Tengo un cuadro de diálogo jQuery y estoy cargando el contenido con Ajax.

El cuadro de diálogo está inicialmente en el centro de la página. El problema, aquí está, ya que es un contenido dinámico, el tamaño de los datos es desconocido. Entonces, cuando obtengo datos grandes, el diálogo crece solo en la parte inferior, es decir, el cuadro de diálogo se expande en la parte inferior y la parte superior sigue en la misma posición.

Lo que yo quiero es

Cuando se cargan los datos, el diálogo debe ampliar tanto en la dirección (arriba y abajo), por lo que el contenido es visible sin necesidad de desplazarse.

Answer 1

El cuadro de diálogo predeterminado es absolutamente relativo.

El cuadro de diálogo puede expandirse al dar altura automática, pero cuando se desplaza la página, el cuadro de diálogo se reposiciona.

La única manera de hacer esto es, aplicar estos estilos para el cuadro de diálogo

1. Posición del cuadro de diálogo en la ventana por

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

2. fijar la posición mediante el uso de estilos CSS

   .fixed-dialog { position:"fixed" }

3. Añadir esta clase para el cuadro de diálogo

   dialogClass : 'fixed-dialog'

Por lo tanto, el diálogo se vería

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

Answer 2

Ninguna de las respuestas que he encontrado en internet me ha satisfecho mientras yo estaba buscando en la solución. Incluso este no. Después de leer mucho más sobre la documentación de la API de JQuery, I found something really interesting. Como describe esta página web, puede vincular un evento en el que se ejecutará después de que la solicitud ajax haya hecho su trabajo. La cosa es que no es tan simple como esto; Como estaba haciendo mis propias pruebas, utilizando el ejemplo proporcionado en la documentación de la API, no pude hacerlo funcionar. Parece que mi diálogo de JQuery no existía en un contexto "futuro".

Esto me llevó a this page cuya descripción era: conectar un controlador de eventos para todos los elementos que coinciden con el selector de corriente, ahora y en el futuro. Encontrar Esto me lleva a crear una función como ésta:

$(document).live("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

y listo! ¡Funciona a las mil maravillas! ¡Después de que se realiza la solicitud de ajax, la propiedad de posición se cambia y se adapta al contenido del div y sus dimensiones!

Espero que ayude a las personas en el futuro!

EDITAR: Es posible que desee utilizar la función ".on()" en lugar de ".live()". Desde el momento en que escribí mi respuesta, parece que la función ".live()" se eliminó en la versión 1.9 de jQuery y reemplazado por el nuevo. Una solución más apropiada para los usuarios de jQuery> = 1,9 sería algo como esto:

$(document).on("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

Answer 3

Use this 
    modal: true, 
    width: '80%', 
    autoResize:true, 
    resizable: true, 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    } 

orden debe ser el mismo

Answer 4

uso esa función:

function centerDialog(id){ 

    var d = $('#'+id).closest('.ui-dialog'), 
     w = $(window); 

    d.css({ 

    'top':(w.height()-d.outerHeight())/2, 
    'left':(w.width()-d.outerWidth())/2 

    }); 

}