Làm thế nào để đặt thanh cuộn chỉ cho cơ thể phương thức?

Tôi có yếu tố sau:

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;" > 
        <div class="modal-content"> 
            <div class="modal-header"> 
                <h3 class="modal-title"></h3> 
            </div> 
            <div class="modal-body"></div> 
            <div class="modal-footer"></div> 
        </div> 
    </div> 
</div> 

Nó hiển thị hộp thoại phương thức một cái gì đó như thế này, về cơ bản, nó đặt thanh cuộn xung quanh toàn bộ modal-dialogvà không modal-bodychứa nội dung tôi đang cố gắng hiển thị.

Hình ảnh trông giống như thế này:

Làm thế nào để tôi có được một thanh cuộn modal-bodychỉ xung quanh ?

Tôi đã cố gắng gán style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"cho modal-bodynhưng nó không hoạt động.

Bạn phải đặt heightcái .modal-bodytrong và đưa ra overflow-y: auto. Cũng đặt lại .modal-dialoggiá trị tràn sang initial.

Xem mẫu làm việc:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}

Nếu bạn chỉ hỗ trợ IE 9 trở lên, bạn có thể sử dụng CSS này sẽ mở rộng quy mô theo kích thước của cửa sổ. Bạn có thể cần phải điều chỉnh "200px", tùy thuộc vào chiều cao của tiêu đề hoặc chân trang của bạn.

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

Vấn đề được giải quyết với giải pháp kết hợp @carlos calla và @jonathan marston.

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

Đối với phiên bản Bootstrap> = 4.3

Bootstrap 4.3 đã thêm tính năng cuộn tích hợp mới vào các chế độ. Điều này chỉ làm cho cuộn nội dung cơ thể phương thức nếu kích thước của nội dung sẽ làm cho cuộn trang. Để sử dụng nó, chỉ cần thêm lớp modal-hộp thoại có thể cuộn vào cùng một div có hộp thoại modal lớp .

Đây là một ví dụ:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
        the<br>quick<br>brown<br>fox<br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Thêm vào Carlos Calla câu trả lời tuyệt vời của .

Chiều cao của thân máy .modal phải được đặt, NHƯNG bạn có thể sử dụng truy vấn phương tiện để đảm bảo phù hợp với kích thước màn hình.

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

@media (min-height: 500px) {
    .modal-body { height: 400px; }
}

@media (min-height: 800px) {
    .modal-body { height: 600px; }
}

Tùy chọn : Nếu bạn không muốn phương thức vượt quá chiều cao cửa sổ và sử dụng thanh cuộn trong phần thân .modal, bạn có thể sử dụng giải pháp đáp ứng này. Xem bản demo hoạt động tại đây: http://codepen.io/dimbslmh/full/mKfCc/

function setModalMaxHeight(element) {
  this.$element     = $(element);
  this.$content     = this.$element.find('.modal-content');
  var borderWidth   = this.$content.outerHeight() - this.$content.innerHeight();
  var dialogMargin  = $(window).width() > 767 ? 60 : 20;
  var contentHeight = $(window).height() - (dialogMargin + borderWidth);
  var headerHeight  = this.$element.find('.modal-header').outerHeight() || 0;
  var footerHeight  = this.$element.find('.modal-footer').outerHeight() || 0;
  var maxHeight     = contentHeight - (headerHeight + footerHeight);

  this.$content.css({
      'overflow': 'hidden'
  });

  this.$element
    .find('.modal-body').css({
      'max-height': maxHeight,
      'overflow-y': 'auto'
  });
}

$('.modal').on('show.bs.modal', function() {
  $(this).show();
  setModalMaxHeight(this);
});

$(window).resize(function() {
  if ($('.modal.in').length != 0) {
    setModalMaxHeight($('.modal.in'));
  }
});

Tôi biết đây là một chủ đề cũ nhưng điều này có thể giúp đỡ người khác.

Tôi đã có thể làm cho cuộn cơ thể bằng cách cố định vị trí phần tử hộp thoại modal. Và vì tôi sẽ không bao giờ biết chính xác chiều cao của cửa sổ trình duyệt, tôi đã lấy thông tin mà tôi chắc chắn, chiều cao của tiêu đề và chân trang. Sau đó tôi đã có thể làm cho lề trên và dưới của phần tử mô đun khớp với các độ cao đó. Điều này sau đó tạo ra kết quả mà tôi đang tìm kiếm. Tôi đã cùng nhau ném một chiếc dĩa để thể hiện công việc của mình.

Ngoài ra, nếu bạn muốn một hộp thoại toàn màn hình, chỉ cần bỏ bình luận chiều rộng: auto; bên trong phần .modal-hộp.full-screen.

https://jsfiddle.net/lot224/znrktLej/

Và đây là css mà tôi đã sử dụng để sửa đổi hộp thoại bootstrap.

.modal-dialog.full-screen {
    position:fixed;
    //width:auto;  // uncomment to make the width based on the left/right attributes.
    margin:auto;                        
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.modal-dialog.full-screen .modal-content {
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:10px;
}

.modal-dialog.full-screen .modal-content .modal-header {
        height:55px;  // adjust as needed.
}

.modal-dialog.full-screen .modal-content .modal-body {
        overflow-y: auto;
          position: absolute;
          top: 0;
          bottom: 0;
        left:0;
        right:0;
          margin-top: 55px; // .modal-header height
          margin-bottom: 80px;  // .modal-footer height
}

.modal-dialog.full-screen .modal-content .modal-footer {
        height:80px;  // adjust as needed.
        position:absolute;
        bottom:0;
        left:0;
        right:0;
}

Hoặc đơn giản hơn, bạn có thể đặt giữa các thẻ của mình trước, sau đó đến lớp css.

<div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div>

#scroll-wrap {
    max-height: 50vh;
    overflow-y: auto;
}

Sử dụng max-heightvới vhđơn vị trên modal-bodyhoặc một div trình bao bọc bên trong modal-body. Điều này sẽ tự động thay đổi kích thước chiều cao modal-bodyhoặc gói div (trong ví dụ này) khi người dùng thay đổi kích thước cửa sổ.

vh là đơn vị độ dài chiếm 1% kích thước khung nhìn cho chiều cao khung nhìn.

Biểu đồ tương thích trình duyệt cho vhđơn vị.

Ví dụ: https://jsfiddle.net/q3xwr53f/

Điều làm việc cho tôi là thiết lập chiều cao thành 100% khi có tràn tự động với hy vọng điều này sẽ giúp ích

   <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>

Một giải pháp js đơn giản để đặt chiều cao phương thức tỷ lệ thuận với chiều cao của cơ thể:

$(document).ready(function () {
    $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>');
});

chiều cao cơ thể phải là 100%:

html, body {
    height: 100%;
    min-height: 100%;
}

Tôi đặt chiều cao cơ thể modal là 80% cơ thể, điều này tất nhiên có thể được tùy chỉnh.

Hy vọng nó giúp.

Trong phiên bản bootstrap mới nhất có một lớp để làm cho cơ thể modal có thể cuộn được.

.modal-hộp thoại-có thể cuộn đến .modal-hộp thoại .

Liên kết phương thức Bootstrap cho nội dung có thể cuộn cơ thể phương thức

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>