Actualizar la posición del cuadro de diálogo jquery ui

Question

Estoy usando un cuadro de diálogo jquery. El contenido de este cuadro de diálogo es dinámico, por lo que la altura cambia cuando el cuadro de diálogo está abierto.

$("#a_div").dialog({ width: 400 }); 

El cuadro de diálogo aparece inicialmente en el centro de la página. pero cuando el cambio de altura no es más centro.

¿Cómo puedo actualizar la posición del diálogo sin cerrarla y volver a abrirla?

gracias

Answer 1

Usted necesidad de volver a establecer la posición haciendo:

$("#a_div").dialog({ 
    position: { 'my': 'center', 'at': 'center' } 
}); 

La posición se fija una vez al crear el diálogo, pero se puede alterar después (o simplemente volver a ajustar al mismo valor, obligando a jQuery recalcular).

Ver esta demo: http://jsfiddle.net/petermorlion/3wNUq/2/

Answer 2

Usted puede tratar de cambiar el tamaño del cuadro de diálogo con sus clases por jQuery directamente (documentation here)

La estructura básica de jQueryUI diálogo es la siguiente:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog"> 
     <p>Dialog content goes here.</p> 
    </div> 
</div> 

Así, tal vez deberías jugar con el ancho y alto de las clases para establecer el mejor.

Otra solución es configurar el ancho de diálogo directamente ante abierta (cuando los datos se ha cargado correctamente):

$("#a_div").dialog({ width: 400 }); 

$.get('my_url.php',function(data){ 

    $('#a_div .ui-dialog').css('width','400px'); 

    // Or... 

    $('#a_div').css('width','400px'); 
}); 

espero que le ayuda.

Answer 3

Si desea utilizar los ajustes de posición exactas usadas por la interfaz de usuario jQuery para el posicionamiento inicial, se puede agarrar las opciones del código de jQuery UI y utilizarlos de nuevo en cualquier momento que desee para reposicionar su diálogo

function refreshDialogPosition(id) { 
    $("#" + id).position({ 
         my: "center", 
         at: "center", 
         of: window, 
         collision: "fit", 
         // Ensure the titlebar is always visible 
         using: function (pos) { 
          var topOffset = $(this).css(pos).offset().top; 
          if (topOffset < 0) { 
           $(this).css("top", pos.top - topOffset); 
          } 
         } 
        }); 
} 

Uso:

refreshDialogPosition("YourDialogId"); 

Esto también hará que su barra de título es siempre visible. De lo contrario, su barra de título estará fuera de su pantalla cuando use diálogos con contenido grande. (altura del contenido> altura de la ventana)

Que tengas un buen día.