jQuery dialoging sempre centrato

Question

Come posso implementare, che una finestra di dialogo modale jQuery con larghezza automatica & altezza sia sempre centrata nel browser. Anche dopo aver ridimensionato la finestra del browser.

Il seguente codice non funziona. Penso che il problema sia l'altezza automatica dell'ampiezza &.

jQuery - Codice

$("<div class='popupDialog'>Loading...</div>").dialog({ 
    autoOpen: true, 
    closeOnEscape: true, 
    height: 'auto', 
    modal: true, 
    title: 'About Ricky', 
    width: 'auto' 
}).bind('dialogclose', function() { 
    jdialog.dialog('destroy'); 
}).load(url, function() { 
    $(this).dialog("option", "position", ['center', 'center']); 
}); 

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

Grazie!

Answer 1

La finestra modale intorno alla finestra di dialogo dovrebbe consentire di posizionare la finestra di dialogo centrato con il css di:

margin-left:auto;margin-right:auto; 

Questo non funziona? Hai una pagina di esempio che possiamo guardare?

Answer 2

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

lavoro jsFiddle: http://jsfiddle.net/vNB8M/

la finestra di dialogo è centrato con la larghezza automatica & altezza e continua ad essere incentrata dopo la finestra di ridimensionamento.

Answer 3

Acutally, penso che il position: ["center", "center"] non essere la soluzione migliore, in quanto assegna un explict top: e left: proprietà CSS per la finestra di dialogo in base alle dimensioni della finestra al momento della creazione.

Mi sono imbattuto in questo stesso problema quando provavo ad avere un centro di dialogo sullo schermo in verticale. Qui è la mia soluzione:

Nella options parte della mia funzione .dialog(), passo position:[null, 32]. Il null imposta lo left: valore sullo stile dell'elemento e lo 32 serve solo a mantenere la finestra di dialogo ancorata alla parte superiore della finestra. Assicurati anche di impostare una larghezza esplicita.

Io uso anche la possibilità dialogClass per assegnare una classe personalizzata, che è semplicemente una proprietà margin:0 auto; css:

.myClass{ 
    margin:0 auto; 
} 

E la mia finestra si presenta come:

$('div#popup').dialog({ 
    autoOpen: false, 
    height: 710, 
    modal: true, 
    position: [null, 32], 
    dialogClass: "myClass", 
    resizable: false, 
    show: 'fade', 
    width: 1080 
    }); 

Speriamo che questo aiuta qualcuno.

Answer 4

Nessuna delle risposte ha fatto esattamente quello che volevo. Per quelli che hanno ancora problemi con questo, ecco cosa ha funzionato per me. Ciò costringerà la finestra di dialogo a comparire sempre al centro dello schermo e centrerà la finestra di dialogo mentre il browser viene ridimensionato.

$("#ShowDialogButton").click(function(){ 
    $("#MyDialog").dialog({ 
     show: 'fade' 
    }).dialog("option", "position", { my: "center", at: "center", of: window }); 

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

}); 

Answer 5

Questa soluzione funziona:

$(window).resize(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
}); 

prestazioni è piuttosto male, ma si può attendere per la fine di ridimensionamento: jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?.

Ho provato anche questo, ma non riesco a scorrere inferiore o superiore posizione dell'elemento che ha aperto dialogo:

$(window).scroll(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});