thoại jQuery UI: cuộn dọc làm việc không đúng nếu chiều cao hộp thoại hơn chiều cao cửa sổ

Question

Đây là mã:

<script type="text/javascript"> 
    $(function(){ 
     var dialogOptions = { 
      title: "Header", 
      autoOpen: false, 
      modal: true, 
      width: 400, 
      height: 1000 
     }; 
     $(".wnd").dialog(dialogOptions); 
     $("#btn").click(function(){ $(".wnd").dialog("open"); }); 
    }); 
</script> 

<style> 
    .wnd {background:yellow;height:900px;width:300px;} 
</style> 

<div class="wnd"></div> 
<button id="btn">click me</button> 

Khi hộp thoại được mở ra và nó cao hơn so với cửa sổ chính có một thanh trượt bên và nó không trượt xuống nếu bạn cố gắng kéo nó với sự trợ giúp của con trỏ chuột (nó có vẻ như bị khóa).

Nhưng nó trượt tốt khi đặt nút xuống (mũi tên) trên bàn phím hoặc cuộn xuống bằng bánh xe chuột.

Đây là demo on jsfiddle.

Làm cách nào để kích hoạt thanh trượt bên đó?

Cảm ơn!

Answer 1

Một giải pháp sạch sẽ như thế này:

http://jsfiddle.net/4fc33/6/

Những gì tôi đang làm là wraping lớp phủ jQuery UI tạo phương pháp để tắt trường hợp ngăn chặn di chuyển để làm việc một cách chính xác.

Answer 2

Một cách tiếp cận khác để không thể sử dụng thanh trượt của cửa sổ là tự bật thanh trượt trên cửa sổ hộp thoại. Chúng sẽ tự động hiển thị nếu bạn đặt nắp trên chiều cao tối đa của hộp thoại nhưng có thể hơi phức tạp với một số phiên bản của jQueryUI.

Ít nhất là trên phiên bản jQueryUI mà tôi đang bật (1.9), tôi cần chỉ định chiều cao tối đa của riêng mình vì thuộc tính tối đa có thể được sử dụng theo the documentation không hoạt động *.

Đây là những gì làm việc:

$("#dialog").dialog({ 
    modal: true, 
    width: "auto", 
    height: "auto" 
    /* maxHeight: whatever won't work, */ 
}).css("maxHeight", window.innerHeight-120); 

tôi trừ 120 pixel tắt của chiều cao của cửa sổ để phù hợp với tiêu đề của cửa sổ Dialog - và phần chân trang với nút "ok" của nó.

* Chiều cao tối đa thực sự sẽ ảnh hưởng nếu hộp thoại đã được cố gắng thay đổi kích thước - nhưng không hiển thị khi hiển thị.