Wie man JQuery UI Dialog volles Fenster besetzen und sich dynamisch an die Fenstergröße anpassen kann

Question

Im Moment kann ich width Attribut auf auto setzen, um die volle Breite des Fensters zu nehmen, und es passt sich dynamisch an, wenn die Fenstergröße ist geändert (z. B. Größenanpassung der Browserfenster oder Anzeige auf einer anderen Bildschirmgröße). Beispiel: http://jsfiddle.net/NnsN2/

Allerdings kann ich nicht height gleich funktionieren. Es wird immer die minimale Höhe sein, die zum Inhalt passt, obwohl ich es versucht habe, es auf zu setzen.

Der übliche Ansatz, die Fensterhöhe zuerst zu bekommen ($(window).height()) und für height zu verwenden, funktioniert hier nicht, weil es statisch ist und sich nicht dynamisch an die Änderung der Fenstergröße anpasst.

Wie kann ich sicherstellen, dass die Höhe immer die volle Höhe des Fensters einnimmt und sich an die Änderung der Fenstergröße anpassen kann?

Answer 1

Sie können versuchen, das Element der #id oder .class zur Laufzeit zu bekommen und dann die Breite/Höhe macht entsprechend die Fensterbreite und -höhe:

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

Hier ist, wie konnte ich „lösen“ dieses Problem für jQuery UI Ver 1.8.17:

nach der Dialog geöffnet wurde, und unter der Annahme, dass Sie seine ID erfasst haben, verwenden Sie die fol Muhen:

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

Die tatsächliche Höhe durch die Eltern Ihrer <div> mit dem Dialog Inhalt, also der Referenz diktiert wird. Sie können diese Methode auch verwenden, um andere Eigenschaften des übergeordneten Elements zu steuern.

Glückliche Codierung!