Twitter bootstrap phương thức có thể cuộn

Tôi đang sử dụng twitter bootstrap cho một dự án mà tôi đang thực hiện.

Tôi có một cửa sổ phương thức có dạng hơi dài hơn trong đó và tôi không thích điều đó khi cửa sổ quá nhỏ, phương thức không cuộn được (nếu vừa biến mất khỏi trang của tôi, trang không thể cuộn được).

Để khắc phục điều này, tôi đã sử dụng css sau

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

Điều này hoạt động chính xác theo cách tôi muốn trong Chrome (nghĩa là, biểu mẫu có kích thước đầy đủ khi cửa sổ đủ lớn, nhưng khi cửa sổ thu nhỏ, phương thức sẽ thu nhỏ lại và có thể cuộn được). Vấn đề là trong IE, chế độ tắt màn hình. Có ai có một giải pháp tốt hơn cho vấn đề này?

Ví dụ của tôi có thể được tìm thấy tại tinyhousemap.com (nhấp vào 'Thêm mục nhập vào bản đồ' trong cửa sổ điều hướng để phương thức xuất hiện)

Cảm ơn

Làm thế nào về giải pháp dưới đây? Nó đã làm việc cho tôi. Thử đi:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Chi tiết:

1. loại bỏ overflow-y: auto;hoặc overflow: auto;khỏi lớp .modal (quan trọng)
2. xóa max-height: 400px;khỏi .modallớp (quan trọng)
3. Thêm max-height: 400px;vào .modal .modal-body (hoặc những gì đã từng, có thể bằng 420pxhoặc ít hơn, nhưng sẽ không nhiều hơn 450px)
4. Thêm overflow-y: auto;vào.modal .modal-body

Xong, chỉ có phần thân sẽ cuộn.

Tôi đã thực hiện một giải pháp nhỏ chỉ sử dụng jQuery.

Đầu tiên, bạn cần đặt một lớp bổ sung vào lớp mà <div class="modal-body">tôi gọi là "ativa-scroll", để nó trở thành một cái gì đó như sau:

<div class="modal-body ativa-scroll">

Vì vậy, bây giờ chỉ cần đặt đoạn mã này trên trang của bạn, gần phần tải JS của bạn:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

Tôi làm việc hoàn hảo cho tôi, cũng theo cách đáp ứng! :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Điều này hoạt động cho Bootstrap 3 mà không cần mã JS và đáp ứng.

Nguồn

Thử và ghi đè bootstrap's:

 .modal {
position: fixed;

Với:

.modal {
position: absolute;

Nó đã làm việc cho tôi.

Tôi cũng đã thêm

.modal { position: absolute; }

vào biểu định kiểu để cho phép hộp thoại cuộn, nhưng nếu người dùng đã di chuyển xuống cuối trang dài thì phương thức có thể bị ẩn khỏi đầu vùng hiển thị.

Tôi hiểu đây không còn là vấn đề trong bootstrap 3, nhưng đang tìm kiếm một giải pháp khắc phục tương đối nhanh chóng cho đến khi chúng tôi nâng cấp, tôi đã kết thúc với phần trên cộng với việc gọi như sau trước khi mở phương thức

$('.modal').css('top', $(document).scrollTop() + 50);

Có vẻ hạnh phúc với FireFox, Chrome, IE10 8 & 7 (các trình duyệt tôi đã sử dụng)

Phương thức của bạn đang bị ẩn trong firefox và đó là do khai báo lề âm mà bạn có bên trong biểu định kiểu chung của mình:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Loại bỏ lợi nhuận âm và mọi thứ hoạt động tốt.

Trong trường hợp sử dụng .modal {overflow-y: auto;}, sẽ tạo thêm thanh cuộn trên bên phải của trang, khi cơ thể đã được tràn.

Công việc giải quyết vấn đề này là tạm thời loại bỏ phần tràn khỏi thẻ body và đặt phương thức tràn-y thành tự động .

Thí dụ:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

Vấn đề với giải pháp CSS của @ grenoult (hầu hết đều hoạt động), là nó hoàn toàn đáp ứng và trên thiết bị di động khi bàn phím bật lên (tức là khi họ nhấp vào một đầu vào trong hộp thoại phương thức), kích thước màn hình thay đổi và hộp thoại phương thức kích thước thay đổi và nó có thể ẩn thông tin đầu vào mà họ vừa nhấp vào để họ không thể thấy những gì họ đang nhập.

Giải pháp tốt hơn cho tôi là sử dụng jquery như sau:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

Nó không đáp ứng với việc thay đổi kích thước cửa sổ, nhưng điều đó không thường xuyên xảy ra.

Tôi đã có thể khắc phục điều này bằng cách sử dụng chỉ số "vh" với chiều cao tối đa trên phần tử .modal-body. 70vh trông phù hợp với mục đích sử dụng của tôi. Sau đó, đặt tràn-y thành tự động để nó chỉ cuộn khi cần.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Không có cách nào trong số này sẽ hoạt động như mong đợi .. Cách đúng là thay đổi vị trí: cố định thành vị trí: tuyệt đối cho lớp .modal