Twitter Bootstrap 3 Modal với Scrollable Body

Question

Tôi đang chuyển từ Bootstrap 2 sang Bootstrap 3. Trong phiên bản cũ, tôi đã sử dụng các modals có nội dung dài và các modals sẽ tự động cuộn khi đạt đến độ cao tối đa đã cho.

Trong Bootstrap 3, phương thức chỉ mở rộng để hiển thị toàn bộ nội dung và tôi phải sử dụng phím trang để thực sự đến cuối và xem các nút ở chân trang. Tôi không thể sử dụng thanh cuộn ở phía xa bên phải của cửa sổ trình duyệt, vì nó được bao phủ bởi phông nền và trong bất kỳ trường hợp nào sẽ không trực quan để chỉ cuộn nội dung trong hộp phương thức.

Làm thế nào tôi có thể đạt được một phương thức trong bootstrap 3 tự động chèn thanh cuộn để cuộn nội dung khi đạt đến chiều cao tối đa?

tôi đã cố gắng thiết lập chiều cao tối đa đến lớp phương thức, như thế này:

.modal{ 
    max-height:80%; 
} 
.modal-header{ 
    height:15% !important;  
} 
.modal-body{ 
    height:70%; 
    overflow:auto; 
} 
.modal-footer{ 
    height:15%; 
} 

Nhưng nó không hoạt động như mong đợi. Cửa sổ phương thức đạt kích thước tối đa, nhưng nó chỉ cắt nội dung của nó ở đó và chân trang thậm chí không được hiển thị.

Cảm ơn bạn đã được trợ giúp.

Answer 1

Chỉ cần thêm:

.modal-content { 
    height:250px; 
    overflow:auto; 
} 

Chiều cao có thể đương nhiên được thích nghi với nhu cầu cá nhân của bạn.

Working Example

Cập nhật:

Nó thực sự khá dễ dàng. Chỉ cần thêm:

.modal-body { 
    max-height: calc(100vh - 212px); 
    overflow-y: auto; 
} 

vào css của bạn.

Nó sử dụng vh và calc, điều này cũng xảy ra để có hỗ trợ trình duyệt tốt (IE9 +).

Điều này được dựa trên answer này. Vui lòng đọc ở đó để biết thêm thông tin chi tiết, tôi sẽ không sao chép câu trả lời của anh ấy.

Working Example

Answer 2

Bạn dường như được mô tả https://github.com/twbs/bootstrap/issues/14916 ("phương thức lớp phủ là trên thanh cuộn '), mà sẽ được cố định trong Bootstrap v3.3.1 bởi https://github.com/twbs/bootstrap/pull/14927 (' Khắc phục bối cảnh phương thức bao phủ thanh cuộn của phương thức").

Answer 3

Nếu bạn có nội dung động, điều này có thể là một nỗi đau. Tôi đã sử dụng điều này để đảm bảo rằng nó có chiều cao chính xác và sau đó nó sẽ cuộn:

$('#modal').on('shown.bs.modal', function() { 
    $('.modal-dialog').css('height', $('.modal-dialog').height()); 
}); 

$('#modal').on('hidden.bs.modal', function() { 
    $('.modal-dialog').css('height', 'auto'); 
});