jQuery - La finestra di dialogo ridimensiona automaticamente il contenuto dinamico e mantiene la posizione centrale

Question

Ho una finestra di dialogo jQuery e sto caricando il contenuto utilizzando Ajax.

La finestra di dialogo è inizialmente al centro della pagina. Il problema, ecco, dal momento che è un contenuto dinamico, la dimensione dei dati è sconosciuta. Quindi, quando ottengo dati di grandi dimensioni, la finestra di dialogo cresce solo nella parte inferiore, ad esempio la finestra di dialogo si espande in basso e la parte superiore è ancora nella stessa posizione.

Quello che voglio è

Quando viene caricato i dati, la finestra dovrebbe espandersi sia nella direzione (superiore e inferiore), in modo che il contenuto è visibile senza scorrere.

Answer 1

La finestra di dialogo predefinita è posizionata in modo assolutamente relativo.

La finestra di dialogo potrebbe espandersi dando l'altezza automatica , ma quando si scorre la pagina, la finestra di dialogo viene riposizionata.

L'unico modo per farlo è, applicare questi stili per la finestra di

1. Posizionare la finestra di dialogo nella finestra da

   position : ['center',<distance from top>]

2. Fissare la posizione utilizzando stile css

   .fixed-dialog { position:"fixed" }

3. Aggiungi questa classe per la finestra di dialogo

   dialogClass : 'fixed-dialog'

Quindi, la finestra sarà simile

$('#dialog-div').dialog({ 
     position : ['center',10], 
     dialogClass: "fixed-dialog" 
    }); 

Answer 2

Nessuna delle risposte che ho trovato su internet mi ha soddisfatto mentre cercavo alla soluzione. Anche questo non lo fa. Dopo aver letto molto di più sulla documentazione dell'API JQuery, I found something really interesting. Come descritto in questa pagina web, è possibile associare un evento in cui verrà eseguito dopo che la richiesta Ajax ha eseguito il proprio lavoro. Il fatto è che non è semplice come questo; Poiché stavo facendo i miei test, utilizzando l'esempio fornito nella documentazione dell'API, non riuscivo a farlo funzionare. Sembra che la mia finestra di dialogo JQuery non esistesse in un modo di contesto "futuro".

Questo mi ha portato a this page quale descrizione era: Allegare un gestore di eventi per tutti gli elementi che corrispondono al selettore corrente, ora e in futuro. Trovare questo mi porta a creare una funzione come questa:

$(document).live("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

E voilà! Esso funziona magicamente! Al termine della richiesta Ajax, la proprietà position viene modificata e adattata al contenuto del div e alle sue dimensioni!

Spero che aiuti le persone in futuro!

MODIFICA: è possibile utilizzare la funzione ".on()" anziché ".live()". Da quando ho scritto la mia risposta, sembra che la funzione ".live()" sia stata rimossa nella versione 1.9 di jQuery e sostituito da quello nuovo. Una soluzione più appropriata per gli utenti di jQuery> = 1.9 sarebbe qualcosa di simile:

$(document).on("ajaxStop", function (e) { 
     $(".myDiagDiv").dialog("option", "position", "center"); 
}); 

Answer 3

Use this 
    modal: true, 
    width: '80%', 
    autoResize:true, 
    resizable: true, 
    position: { 
     my: "center top", 
     at: "center top", 
     of: window 
    } 

ordine deve essere lo stesso

Answer 4

io uso quella funzione:

function centerDialog(id){ 

    var d = $('#'+id).closest('.ui-dialog'), 
     w = $(window); 

    d.css({ 

    'top':(w.height()-d.outerHeight())/2, 
    'left':(w.width()-d.outerWidth())/2 

    }); 

}