hộp thoại modal Jquery DISABLE thanh cuộn

Question

Như bạn có thể nhìn thấy trên liên kết này, http://jsbin.com/ozapol/9,

Jquery vô hiệu hóa các thanh cuộn trên một số phiên bản của trình duyệt IE và các phiên bản mới nhất của chrome. (Tôi chưa thử bất kỳ cách nào khác ...)

Có cách nào để giữ thanh cuộn được bật để có thể cuộn qua hộp thoại dài không?

Cảm ơn bạn! Bye

giải pháp đẹp cho Internet Explorer (Nhờ jk.)

html {overflow-y : scroll} 

workaround tàn bạo dành cho Chrome (Nhờ jk.)

Mở Chrome, jQueryUI hijacks chuột sự kiện trên các thanh cuộn. Điều này giống như một lỗi được đề cập trong các liên kết ở trên. Để loại bỏ những ràng buộc, bạn phải unbind sự kiện mỗi khi bạn tạo một hộp thoại modal:

$("#longdialog").dialog({ 
    open: function(event, ui) { 
     window.setTimeout(function() { 
      jQuery(document).unbind('mousedown.dialog-overlay') 
          .unbind('mouseup.dialog-overlay'); 
     }, 100); 
    }, 
    modal:true 
}); 

Có là ví dụ cuối cùng: http://jsbin.com/ujagov/2

Liên kết đến các báo cáo lỗi:

1. http://bugs.jqueryui.com/ticket/4671
2. http://wiki.jqueryui.com/w/page/34725121/Visual-Test-Page-Cleanup

Answer 1

Bạn có thể giữ thanh cuộn kích hoạt với:

html {overflow-y: scroll;} 

Bạn có thể thêm CSS mà lập trình vì vậy nó không ảnh hưởng đến tất cả các trang của trang web và có thể thiết kế.

Và, bạn có thể phải unbind các sự kiện chuột mà hộp thoại modal hijacks:

$("#longdialog").dialog({ 
    open: function(event, ui) { 
     window.setTimeout(function() { 
      jQuery(document).unbind('mousedown.dialog-overlay') 
          .unbind('mouseup.dialog-overlay'); 
     }, 100); 
    }, 
    modal:true 
}); 

Xem Scrollbar problem with jQuery UI dialog in Chrome and Safari

Answer 2

Thêm mã sau đây để bạn css-file:

.ui-dialog .ui-dialog-content { 
    overflow-y: scroll; 

} 
#longdialog{ 
    height: 450px; 

} 

Các tràn không hoạt động vì chiều cao được đặt thành tự động, xác định chiều cao cụ thể cho div vùng chứa

Answer 3

Lỗi này được sửa ở jQueryUi-1.10. Đây là liên kết với sự cố http://bugs.jqueryui.com/ticket/4671.

Answer 4

Nếu bạn không muốn hoặc không thể nâng cấp lên jQuery UI 1.10, đây là giải pháp cho bạn:

https://stackoverflow.com/a/7740756/354756