jQuery - Automatyczne zmiany rozmiaru okna dialogowego na zawartość dynamiczną i utrzymanie pozycji środkowej

Question

Mam okno dialogowe jQuery i Am ładowanie treści za pomocą Ajax.

Okno jest początkowo na środku strony. Problem polega na tym, że od jego zawartości dynamicznej rozmiar danych jest nieznany. Tak więc, gdy otrzymuję duże dane, okno dialogowe rośnie tylko w dolnej części, to jest okno dialogowe rozwija się w dolnej części, a góra jest nadal w tej samej pozycji.

Co chcę jest

Gdy dane są ładowane, okno powinno rozwijać się zarówno w kierunku (góra i dół), tak, że zawartość jest widoczna bez przewijania.

Answer 1

Domyślne okno dialogowe jest bezwzględnie pozycjonowane względnie.

Okno dialogowe może rozwinąć się po nadaniu wysokości automatycznej, ale po przewinięciu strony okno dialogowe samo się zmienia.

Jedynym sposobem, aby to zrobić, to zastosować te style do dialogowym

1. Pozycja okna w oknie przez

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

2. ustalić pozycję za pomocą css styl

   .fixed-dialog { position:"fixed" }

3. Dodaj tę klasę do okna

   dialogClass : 'fixed-dialog'

więc okno będzie wyglądać

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

Answer 2

żadna z odpowiedzi nie znalazłem w internecie spełnione mnie, gdy szukałem w rozwiązaniu. Nawet tego nie ma. Po przeczytaniu dużo więcej na temat dokumentacji interfejsu API JQuery, I found something really interesting. Jak opisuje niniejsza strona internetowa, można powiązać zdarzenie, w którym zostanie ono wykonane po wykonaniu zadania ajax. Chodzi o to, że nie jest to takie proste; Ponieważ robiłem własne testy, korzystając z przykładu przedstawionego w dokumentacji interfejsu API, nie mogłem go uruchomić. Wygląda na to, że moje okno dialogowe JQuery nie istniało w "przyszłościowym" kontekście.

To doprowadziło mnie do this page, który to opis brzmiał: Dołącz obsługę zdarzeń dla wszystkich elementów, które pasują do bieżącego selektora, teraz i w przyszłości. Znalezienie to prowadzi mnie do stworzenia funkcję jak ten:

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

i voila! To działa jak urok! Po wykonaniu zapytania ajax właściwość position zostaje zmieniona i dostosowana do zawartości div i jej wymiarów!

Mam nadzieję, że pomoże to ludziom w przyszłości!

EDYCJA: Możesz użyć funkcji ".on()" zamiast ".live()". Od czasu gdy napisałem swoją odpowiedź, wygląda na to, że funkcja ".live()" została usunięta w wersji 1.9 jQuery i zastąpiony przez nowy. Bardziej odpowiednim rozwiązaniem dla użytkowników jQuery> = 1,9 byłoby coś takiego:

$(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 
    } 

kolejność musi być taka sama

Answer 4

używam tej funkcji:

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 

    }); 

}