jQuery diálogo siempre centrado

Question

¿Cómo puedo implementar, que un cuadro de diálogo modal jQuery con ancho automático & altura siempre se centra en el navegador. También después de cambiar el tamaño de la ventana del navegador.

El siguiente código no funciona. Creo que el problema es el ancho automático de & de altura.

jQuery - código

$("<div class='popupDialog'>Loading...</div>").dialog({ 
    autoOpen: true, 
    closeOnEscape: true, 
    height: 'auto', 
    modal: true, 
    title: 'About Ricky', 
    width: 'auto' 
}).bind('dialogclose', function() { 
    jdialog.dialog('destroy'); 
}).load(url, function() { 
    $(this).dialog("option", "position", ['center', 'center']); 
}); 

$(window).resize(function() { 
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
}); 

Gracias!

Answer 1

La ventana modal alrededor de la caja de diálogo debería permitirle colocar el cuadro de diálogo centrado con el css de:

margin-left:auto;margin-right:auto; 

¿Esto no funciona? ¿Tienes una página de "muestra" que podamos ver?

Answer 2

$(window).resize(function() { 
    $("#dialog").dialog("option", "position", "center"); 
}); 

jsFiddle de trabajo: http://jsfiddle.net/vNB8M/

El diálogo está centrada con anchura auto & altura y continúa siendo centrada después de cambiar el tamaño de ventana.

Answer 3

Acutally, creo que el position: ["center", "center"] no ser la mejor solución, ya que asigna un explict top: y left: propiedades CSS al diálogo basado en el tamaño de la ventana gráfica en la creación.

Me encontré con este mismo problema al tratar de tener un centro de diálogo en la pantalla verticalmente. Aquí está mi solución:

En la options parte de mi función .dialog(), paso position:[null, 32]. El null establece el valor left: del estilo del elemento, y el 32 es solo para mantener el cuadro de diálogo vinculado a la parte superior de la ventana. También asegúrese de establecer un ancho explícito.

También uso la opción dialogClass para asignar una clase personalizada, que es simplemente una propiedad margin:0 auto; css:

.myClass{ 
    margin:0 auto; 
} 

y mira mi diálogo como:

$('div#popup').dialog({ 
    autoOpen: false, 
    height: 710, 
    modal: true, 
    position: [null, 32], 
    dialogClass: "myClass", 
    resizable: false, 
    show: 'fade', 
    width: 1080 
    }); 

Esperamos que esto ayude a alguien.

Answer 4

Ninguna de las respuestas hizo lo que yo quería. Para aquellos que todavía tienen problemas con esto, esto es lo que funcionó para mí. Esto forzará que el diálogo aparezca siempre en el centro de la pantalla, y centrará el diálogo a medida que el navegador cambie de tamaño.

$("#ShowDialogButton").click(function(){ 
    $("#MyDialog").dialog({ 
     show: 'fade' 
    }).dialog("option", "position", { my: "center", at: "center", of: window }); 

    $(window).resize(function() { 
     $("#MyDialog").dialog("option", "position", { my: "center", at: "center", of: window }); 
    }); 

}); 

Answer 5

Esta solución está funcionando:

$(window).resize(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
}); 

rendimiento es bastante malo, pero se puede esperar a finales de redimensionamiento: jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?.

También probé esto, pero no puede desplazarse menor o mayor que la posición del elemento que se abrió de diálogo:

$(window).scroll(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});