Cómo adjuntar a todos los eventos abiertos de Jquery.UI.dialog para cambiar el tamaño del diálogo dinámicamente en abierto?

Question

Estoy trabajando con una gran base de código existente con toneladas de código heredado que no puedo cambiar. Mi tarea es actualizar a la versión 1.8 de la biblioteca de UI. Tengo problemas con el posicionamiento de un elemento jquery.ui.dialog().

Todo el sitio se carga mediante javascript (que supongo que es furor en este momento). Toneladas de HTML se cargan dinámicamente lo que causa problemas de posicionamiento con el cuadro de diálogo. Anteriormente, el sitio utilizaba una posición de CSS personalizada: relativa para asegurarse de que todos los cuadros de diálogo estuvieran en posición correcta.

Los diálogos están configurados como esto:

$('#deletingDialog').dialog({ autoOpen: false, modal: true, position: 'center' }); 

Con la interfaz de usuario 1.8 se ha producido un cambio en el diálogo de direcciones() obras que rompe este comportamiento: http://jqueryui.com/docs/Upgrade_Guide/1.8.6

no cambian Posición DOM en abierto

Los cuadros de diálogo ya no se mueven en DOM cuando se abren. El único momento en que se mueve el cuadro de diálogo es durante la inicialización cuando se agrega al cuerpo . Esto soluciona una serie de problemas , tales como ser reinicio elementos de formulario, iframes recarga, etc.

Todo el código de configuración de diálogo() está obligado a html elementos muy temprano y se encuentra en varios lugares diferentes. En un mundo perfecto, podría entrar allí y cambiar todas las llamadas de diálogo para que se atrasen y solo configurarlo justo antes de que se abra el diálogo. Esto probablemente arreglaría el problema. Desafortunadamente cambiar todo este código es realmente prohibitivo y desafiante no es una opción.

Lo que estoy pensando es enganchar en el evento abierto de diálogo http://jqueryui.com/demos/dialog/#event-open y restablecer la posición justo antes de que se abra realmente la ventana modal.

Así que o bien puedo encontrar todos los elementos con cuadros de diálogo y luego vincular a través de $(".selector").bind("dialogopen" etc etc. o enganchar en el evento globalmente (preferido). Ya sea que necesito una manera de decir "dame todos los elementos con un cuadro de diálogo adjunto" o "siempre hacer este código cuando el evento abierto sucede.

¿Alguna idea?

Answer 1

ya sea que necesito una manera de decir "darme todos los elementos con un diálogo conectado" o "siempre hacer este código cuando ocurre el evento abierto.

Creo que su primera idea de usar un selector para seleccionar todos los elementos que tienen un widget de diálogo asociado a ellos. Esto debería ser relativamente fácil: se aplica un classui-dialog-content a cada elemento al que se aplica el widget de diálogo (se inserta un contenedor div alrededor del contenido). Entonces su código sería:

$(".ui-dialog-content").bind("dialogopen", function() { 
    // Reposition dialog, 'this' refers to the element the even occurred on. 
    $(this).dialog("option", "position", "top"); 
}); 

Espero que ayude.

Answer 2

que mi solución

// repositioning of all rising dialogs 
$(document).on("dialogopen", ".ui-dialog", function (event, ui) { 
    var t = $(event.currentTarget), w = $(window); 

    $(this).css({ 
     top: (w.height()/2) - (t.height()/2), 
     left: (w.width()/2) - (t.width()/2) 
    }) 
});