Pozycjonowanie okna dialogowego jqueryui

Question

Używam interfejsu użytkownika JQuery i chciałbym umieścić mój dialog poziomo wyśrodkowany, ale pionowo powyżej środka, być może o stałą liczbę pikseli lub względną odległość od górnej krawędzi strony. Czy istnieje prosty sposób na zrobienie tego? Wygląda na to, że istnieje tylko kilka wstępnie zdefiniowanych wartości lub mogę użyć dokładnej pozycji, ale czy istnieje prosty sposób na osiągnięcie tego?

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

      }); 

Answer 1

Użyj position option, aby wyrównać górną część okna z górną częścią okna (plus piksel lub procent przesunięcia).

Powinno to wyśrodkować okno dialogowe w poziomie i umieścić je w odległości 150 pikseli od góry.

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

Starsze wersje jQuery interfejsu stosować tablicę zawierającą [x, y] parę pixel przesunięty w lewo, górnym rogu widoku współrzędnych (np [350100]).

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

Answer 2

zastosować css do swojej # Użycie dialog-forma% próbki

jeśli width = 1000

umieścić

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

, aby był wyśrodkowany. lub możesz użyć elementu iframe.

Answer 3

natknąłem się na ten czas szukając tym samym pytaniem bu już miałem moją odpowiedź:

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

ten skoncentruje poziomo i 100 pikseli od górnej

to działa również

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

centrum w poziomie i 100 pikseli od dołu centrum

Answer 4

Poprawiłem odpowiedź Exlorda, aby pasowała.

pozycji: [ 'środkowy 7%', 'Center 12%']

Reguluje się poziomo i pionowo

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

Answer 5

ten pracował mi

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

Możesz także sprawdzić pozycje dialogowe tutaj Find Position

Answer 6

Spróbuj tego:

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

Answer 7

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

pracował dla mnie.