¿Cómo centrar automáticamente el cuadro de diálogo de la interfaz de usuario de jQuery al cambiar el tamaño del navegador?

Cuando usa el cuadro de diálogo de la interfaz de usuario de jquery, todo funciona bien, excepto por una cosa. Cuando se cambia el tamaño del navegador, el cuadro de diálogo permanece en su posición inicial, lo que puede ser realmente molesto.

Puede probarlo en: http://jqueryui.com/demos/dialog/

Haga clic en el ejemplo de "diálogo modal" y cambie el tamaño de su navegador.

Me encantaría poder permitir que los diálogos se centren automáticamente cuando el navegador cambia de tamaño. ¿Se puede hacer esto de manera eficiente para todos mis cuadros de diálogo en mi aplicación?

¡Muchas gracias!

Establecer la positionopción forzará esto, así que solo use el mismo selector que cubra todos sus cuadros de diálogo donde uso #dialogaquí (si no los encuentra, no se realiza ninguna acción, como todo jQuery):

UI de jQuery antes de la 1.10

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

jQuery UI 1.10 o superior

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

Aquí está la misma página de demostración de la interfaz de usuario de jQuery agregando solo el código anterior , solo estamos agregando un controlador al resizeevento de la ventana con .resize(), por lo que desencadena el re-centro en el momento apropiado.

Alternativamente a la respuesta de Ellesedil,

Esa solución no funcionó para mí de inmediato, así que hice lo siguiente, que también es una versión dinámica pero abreviada:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

+1 para Ellesedil aunque

EDITAR:

Versión mucho más corta que funciona muy bien para diálogos únicos:

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

No es necesario que .each () se use quizás si tiene algunos cuadros de diálogo únicos que no desea tocar.

Aquí puede encontrar una respuesta más completa, que utiliza la respuesta de Nick de una manera más flexible .

A continuación se muestra una adaptación del código de relevancia de ese hilo. Esta extensión esencialmente crea una nueva configuración de diálogo llamada autoReposition que acepta verdadero o falso. El código tal como está escrito establece la opción por defecto en verdadero. Pon esto en un archivo .js en tu proyecto para que tus páginas puedan aprovecharlo.

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

Esto le permite proporcionar un "verdadero" o "falso" para esta nueva configuración cuando crea su diálogo en su página.

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

Ahora, este diálogo siempre se reposicionará. AutoReposition (o como se llame a la configuración) puede manejar cualquier cuadro de diálogo que no tenga una posición predeterminada y reposicionarlos automáticamente cuando la ventana cambia de tamaño. Dado que está configurando esto cuando crea el diálogo, no necesita identificar un diálogo de alguna manera porque la funcionalidad de reposicionamiento se integra en el diálogo mismo. Y la mejor parte es que, dado que esto se establece por diálogo, puede hacer que algunos diálogos se reposicionen y otros permanezcan donde están.

Crédito al usuario scott.gonzalez en los foros de jQuery por la solución completa.

Otra opción solo de CSS que funciona es esta. Los márgenes negativos deben ser la mitad de su altura y la mitad de su ancho. Entonces, en este caso, mi diálogo tiene 720 px de ancho por 400 px de alto. Esto lo centra vertical y horizontalmente.

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Alternativamente, se puede usar la posición de la interfaz de usuario de jQuery ,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

¡Hola a todos!

Solución Vanilla JS:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());