Jak zrobić okno dialogowe interfejsu użytkownika JQuery zająć pełne okno i dynamicznie dostosować do zmiany rozmiaru okna

Question

W tej chwili mogę ustawić atrybut width na auto, aby przyjąć pełną szerokość okna, i dynamicznie dostosować się, jeśli rozmiar okna jest zmienione (np. zmiana rozmiaru okna przeglądarki lub wyświetlenie go na innym rozmiarze ekranu). Przykład: http://jsfiddle.net/NnsN2/

Jednak nie mogę uzyskać height, aby działał tak samo. Zawsze będzie to minimalna wysokość, która będzie pasować do treści, mimo że próbowałem ustawić ją na auto.

Typowe podejście do uzyskania wysokości okna w pierwszej kolejności ($(window).height()) i użycie go dla height nie działa tutaj, ponieważ będzie statyczne i nie będzie dynamicznie dostosowywać się do zmiany rozmiaru okna.

W jaki sposób ustawić wysokość, aby zawsze była pełna wysokość okna, a także móc dostosować się do zmiany rozmiaru okna?

Answer 1

Można próbować uzyskać elementu #id lub .class przy starcie, a następnie dokonać szerokość/wysokość w zależności od szerokości okna i wysokość:

$(window).resize(function() { 
    $('.ui-dialog').css({ 
     'width': $(window).width(), 
     'height': $(window).height(), 
     'left': '0px', 
     'top':'0px' 
    }); 
}).resize(); //<---- resizes on page ready 

checkout in fiddle

Answer 2

Oto, jak udało mi się "Rozwiąż" ten problem dla interfejsu jQuery UI w wersji 1.8.17:

Po dialog został otwarty i zakładając, że przechwyciłeś jego identyfikator, użyj polecenia ryk:

$("#DlgID").parent().css('height', $(window).height()); 

Rzeczywista wysokość jest podyktowana przez rodzica swoimi <div> zawierającego treść dialogu, stąd odniesienie. Możesz także użyć tej metody do kontrolowania innych właściwości rodzica.

Szczęśliwe kodowanie!