Come centrare automaticamente la finestra di dialogo dell'interfaccia utente di jQuery durante il ridimensionamento del browser?

Quando usi la finestra di dialogo dell'interfaccia utente di jquery, tutto funziona bene, tranne una cosa. Quando il browser viene ridimensionato, la finestra di dialogo rimane nella sua posizione iniziale, il che può essere davvero fastidioso.

Puoi provarlo su: http://jqueryui.com/demos/dialog/

Fare clic sull'esempio "finestra di dialogo modale" e ridimensionare il browser.

Mi piacerebbe poter consentire ai dialoghi di centrarsi automaticamente quando il browser viene ridimensionato. È possibile farlo in modo efficiente per tutte le mie finestre di dialogo nella mia app?

Molte grazie!

L'impostazione positiondell'opzione lo forzerà, quindi usa lo stesso selettore che copre tutte le tue finestre di dialogo dove uso #dialogqui (se non le trova non viene eseguita alcuna azione, come tutto jQuery):

jQuery UI prima della 1.10

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

jQuery UI 1.10 o versione successiva

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

Ecco la stessa pagina demo dell'interfaccia utente jQuery che aggiunge solo il codice sopra , stiamo solo aggiungendo un gestore resizeall'evento della finestra con .resize(), quindi attiva il ricentramento al momento opportuno.

In alternativa alla risposta di Ellesedil,

Quella soluzione non ha funzionato subito per me, quindi ho fatto quanto segue che è anche una versione dinamica ma abbreviata:

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

+1 per Ellesedil però

MODIFICARE:

Versione molto più breve che funziona alla grande per i dialoghi singoli:

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

Non è necessario utilizzare .each () forse se si dispone di alcune finestre di dialogo uniche che non si desidera toccare.

Una risposta più completa, che utilizza la risposta di Nick in modo più flessibile, può essere trovata qui .

Di seguito è riportato un adattamento del codice di rilevanza da quel thread. Questa estensione crea essenzialmente una nuova impostazione della finestra di dialogo chiamata autoReposition che accetta un vero o falso. Il codice come scritto imposta l'opzione su true. Mettilo in un file .js nel tuo progetto in modo che le tue pagine possano sfruttarlo.

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

Questo ti permette di fornire un "vero" o "falso" per questa nuova impostazione quando crei la tua finestra di dialogo sulla tua pagina.

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

Ora questa finestra di dialogo si riposizionerà sempre da sola. AutoReposition (o qualunque cosa tu chiami l'impostazione) può gestire tutte le finestre di dialogo che non hanno una posizione predefinita e riposizionarle automaticamente quando la finestra viene ridimensionata. Dal momento che lo stai impostando quando crei la finestra di dialogo, non è necessario identificare una finestra di dialogo in qualche modo perché la funzionalità di riposizionamento viene incorporata nella finestra di dialogo stessa. E la parte migliore è che poiché questo è impostato per finestra di dialogo, è possibile riposizionare alcune finestre di dialogo e altre rimangono dove sono.

Ringraziamo l'utente scott.gonzalez sui forum jQuery per la soluzione completa.

Un'altra opzione solo CSS che funziona è questa. I margini negativi dovrebbero essere pari a metà della tua altezza e metà della tua larghezza. Quindi, in questo caso, il mio dialogo è largo 720px per 400px alto. Questo lo centra verticalmente e orizzontalmente.

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

In alternativa è possibile utilizzare la posizione dell'interfaccia utente jQuery ,

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

Ciao a tutti!

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