modal - jquery popup window

¿Cómo se puede autocentrar el cuadro de diálogo de la interfaz de usuario de jQuery al cambiar el tamaño del navegador?

Question

Cuando utiliza el diálogo de la IU de jquery, todo funciona bien, excepto por una cosa. Cuando se cambia el tamaño del navegador, el diálogo simplemente 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 dejar que los cuadros de diálogo se autocentran cuando el navegador cambie de tamaño. ¿Se puede hacer esto de una manera eficiente para todos mis diálogos en mi aplicación?

¡Muchas gracias!

Answer 1

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 sin embargo

EDITAR:

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

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

No es necesario usar .each () tal vez si tiene algunos cuadros de diálogo únicos que no desea tocar.

Answer 2

Alternativamente, se puede usar la position jQuery ui,

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

Answer 3

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

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

Answer 4

Una respuesta más completa, que utiliza la respuesta de Nick de una manera más flexible se puede encontrar here .

A continuación se muestra una adaptación del código de relevancia de ese hilo. Esta extensión crea esencialmente una nueva configuración de diálogo llamada autoReposition que acepta un verdadero o falso. El código como está escrito predetermina la opción a verdadero. Coloque esto en un archivo .js en su proyecto para que sus 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 suministrar 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 lo que usted llame la configuración) puede manejar los cuadros de diálogo que no tienen una posición predeterminada y los reposiciona automáticamente cuando cambia el tamaño de la ventana. Como 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 configura por diálogo, puede hacer que algunos diálogos se reposicionen y otros permanezcan donde están.

Gracias al usuario scott.gonzalez en los foros jQuery por la solución completa.

Answer 5

¡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 });
  }
}());

Answer 6

Establecer la opción de position lo forzará, así que solo use el mismo selector que cubre todos sus cuadros de diálogo donde uso #dialog aquí (si no los encuentra no se realiza ninguna acción, como todos jQuery):

jQuery UI antes 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 jQuery UI que solo agrega el código anterior , solo estamos agregando un controlador al evento de cambio de resize la ventana con .resize() , por lo que desencadena el recentrado en el momento apropiado. 1.