jqueryui dialog positioning

Question

Sto usando l'interfaccia utente di JQuery e vorrei posizionare la mia finestra di dialogo orizzontalmente centrata ma verticalmente sopra il centro, forse di una quantità fissa di pixel o una distanza relativa dalla parte superiore della pagina. C'è un modo semplice per farlo? Sembra che ci siano solo un paio di valori predefiniti o posso usare una posizione esatta ma c'è un modo semplice per farlo?

$("#dialog-form").dialog({ 
       autoOpen: false, 
       width: 630, 
       position: 'center', 
       modal: true, 
       resizable: false, 
       closeOnEscape: false 

      }); 

Answer 1

Utilizzare lo position option per allineare la parte superiore della finestra di dialogo con la parte superiore della finestra (più un pixel o uno spostamento percentuale).

Questo dovrebbe centrare la finestra di dialogo orizzontalmente e posizionarla a 150 pixel dall'alto.

$("#dialog-form").dialog({ 
    autoOpen: false, 
    width: 630, 
    position: { my: 'top', at: 'top+150' }, 
    modal: true, 
    resizable: false, 
    closeOnEscape: false 
}); 

versioni precedenti di jQuery UI usati un vettore contenente un [x, y] coppia di coordinate in pixel offset da sinistra, angolo superiore della finestra (per esempio [350.100]).

var dialogWidth = 630; 
$("#dialog-form").dialog({ 
    // ... 
    width: dialogWidth, 
    position: [($(window).width()/2) - (dialogWidth/2), 150], 
    // ... 
}); 

Answer 2

applicare css nella vostra # utilizzo dialogo-forma% del campione

se width = 1000

messo

sinistra: 50% margin-left: -500px;

per renderlo centrato. oppure puoi usare iframe.

Answer 3

mi sono imbattuto in questo durante la ricerca per la stessa domanda bu ho già avuto la mia risposta:

position: ['center', 'top+100'] 

questo centrerà in orizzontale e 100 pixel dall'alto

questo funziona anche

position: ['center', 'center+100'] 

centro in orizzontale e 100 pixel dal basso centro

Answer 4

Ho regolato la risposta di Exlord per adattarla.

posizione: [ 'centro-7%', 'centro-12%']

Regola orizzontalmente e verticalmente

$(".popup").dialog({  
position: ['center-7%', 'center-12%'], 
title: 'Updating', 
    width: "auto", 
} 
}); 

Answer 5

Questo ha funzionato per me

position: { my: "center", at: "center", of: window }, 

Inoltre è possibile controllare le posizioni di dialogo qui
Find Position

Answer 6

Prova questa:

position: { 
     my: 'top', 
     at: 'top', 
     of: $('#some-div') 
    }, 

Answer 7

position: { 
    my: 'top', 
    at: 'top+150' 
} 

lavorato per me.