Cách đặt hộp thoại Giao diện người dùng JQuery chiếm toàn bộ cửa sổ và điều chỉnh động để thay đổi kích thước cửa sổ

Question

Hiện tại, tôi có thể đặt thuộc tính width thành auto để có chiều rộng đầy đủ của cửa sổ và điều chỉnh tự động nếu kích thước cửa sổ đang được đã thay đổi (ví dụ như định lại kích thước cửa sổ trình duyệt hoặc hiển thị nó trên một kích thước màn hình khác). Ví dụ: http://jsfiddle.net/NnsN2/

Tuy nhiên, tôi không thể nhận được height để hoạt động tương tự. Nó sẽ luôn là chiều cao tối thiểu phù hợp với nội dung, mặc dù tôi đã thử đặt nó thành auto.

Cách tiếp cận thông thường của chiều cao cửa sổ trước ($(window).height()) và sử dụng cho height không hoạt động ở đây, vì nó sẽ tĩnh và không tự động điều chỉnh để thay đổi kích thước cửa sổ.

Làm thế nào tôi có thể làm cho chiều cao luôn luôn có chiều cao đầy đủ của cửa sổ cũng như có thể thích ứng với chính nó để thay đổi kích thước cửa sổ?

Answer 1

Bạn có thể thử để có được của #id hoặc .class trong thời gian chạy và sau đó yếu tố làm cho chiều rộng/Chiều cao theo chiều rộng cửa sổ và height:

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

Sau đây là cách tôi đã có thể "giải quyết" vấn đề này cho jQuery UI Ver 1.8.17:

Sau khi cuộc đối thoại đã được mở và giả định rằng bạn đã bắt được id của nó, hãy sử dụng lowing:

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

Chiều cao thực tế được quyết định bởi phụ huynh của <div> có nội dung đối thoại, do đó tham chiếu. Bạn cũng có thể sử dụng phương pháp này để kiểm soát các thuộc tính khác của phụ huynh.

Mã hóa vui vẻ!