Como centralizar automaticamente a caixa de diálogo da IU do jQuery ao redimensionar o navegador?

Quando você usa a caixa de diálogo da IU do jquery, tudo funciona bem, exceto por uma coisa. Quando o navegador é redimensionado, a caixa de diálogo apenas permanece em sua posição inicial, o que pode ser realmente irritante.

Você pode testá-lo em: http://jqueryui.com/demos/dialog/

Clique no exemplo de "diálogo modal" e redimensione seu navegador.

Eu adoraria permitir que as caixas de diálogo sejam centralizadas automaticamente quando o navegador for redimensionado. Isso pode ser feito de maneira eficiente para todos os meus diálogos no meu aplicativo?

Muito obrigado!

Definir a positionopção forçará isso, então apenas use o mesmo seletor cobrindo todos os seus diálogos onde eu uso #dialogaqui (se não os encontrar, nenhuma ação será realizada, como todo o jQuery):

jQuery UI antes de 1.10

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

jQuery UI 1.10 ou superior

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

Aqui está a mesma página de demonstração do jQuery UI adicionando apenas o código acima , estamos apenas adicionando um manipulador ao resizeevento da janela com .resize(), portanto, ele aciona o recentramento no momento apropriado.

Alternativamente à resposta de Ellesedil,

Essa solução não funcionou para mim imediatamente, então fiz o seguinte, que também é uma versão dinâmica, mas abreviada:

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

1 para Ellesedil embora

EDITAR:

Versão muito mais curta que funciona muito bem para caixas de diálogo individuais:

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

Não é necessário que .each () seja usado, talvez se você tiver alguns diálogos exclusivos que não deseja tocar.

Uma resposta mais abrangente, que usa a resposta de Nick de uma forma mais flexível, pode ser encontrada aqui .

Uma adaptação do código de relevância desse segmento está abaixo. Esta extensão essencialmente cria uma nova configuração de diálogo chamada autoReposition que aceita um verdadeiro ou falso. O código conforme escrito padroniza a opção como verdadeiro. Coloque isso em um arquivo .js em seu projeto para que suas páginas possam aproveitá-lo.

    $.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'));
            }
        });
    });

Isso permite que você forneça um "verdadeiro" ou "falso" para esta nova configuração ao criar sua caixa de diálogo em sua 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");
            }
        }
    });
});

Agora, esta caixa de diálogo sempre se reposicionará. A AutoReposição (ou o que quer que você chame de configuração) pode lidar com qualquer caixa de diálogo que não tenha uma posição padrão e reposicioná-la automaticamente quando a janela for redimensionada. Como você está definindo isso ao criar a caixa de diálogo, não é necessário identificar uma caixa de diálogo de alguma forma, porque a funcionalidade de reposicionamento torna-se integrada à própria caixa de diálogo. E a melhor parte é que, como isso é definido por diálogo, você pode fazer com que alguns diálogos se reposicionem e outros permaneçam onde estão.

Agradecemos ao usuário scott.gonzalez nos fóruns da jQuery pela solução completa.

Outra opção somente CSS que funciona é esta. As margens negativas devem ser iguais a metade da altura e metade da largura. Portanto, neste caso, minha caixa de diálogo tem 720 px de largura por 400 px de altura. Isso o centraliza verticalmente e horizontalmente.

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

Alternativamente, a posição ui do jQuery pode ser usada,

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

Olá a todos!

Solução 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 });
  }
}());