Kaydırma çubuğunu yalnızca modal gövde için nasıl koyabilirim?

Aşağıdaki öğeye sahibim:

<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> 

Böyle kalıcı iletişim şey, temelde, tüm etrafında kaydırma çubuğunu koyar gösterir modal-dialogve modal-bodyben ekrana çalışıyorum içeriğe sahip olduğu.

Görüntü şuna benzer:

modal-bodyYalnızca kaydırma çubuğunu nasıl alırım ?

Ben atama denedi style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"etmek modal-bodyama işe yaramadı.

Sen ayarlamak zorunda heightarasında .modal-bodyve verin overflow-y: auto. Ayrıca .modal-dialogtaşma değerini sıfırlayın initial.

Çalışma örneğine bakın:

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;
}

Yalnızca IE 9 veya üstünü destekliyorsanız, pencerenin boyutuna sorunsuz bir şekilde ölçeklenecek bu CSS'yi kullanabilirsiniz. Üstbilginizin veya altbilginizin yüksekliğine bağlı olarak, "200 piksel" ayarını yapmanız gerekebilir.

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

Problem @carlos calla ve @jonathan marston ile çözüldü.

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

Bootstrap sürümleri için> = 4.3

Bootstrap 4.3, modellere yeni dahili kaydırma özelliği ekledi. Bu, içeriğin boyutu aksi takdirde sayfayı kaydırırsa yalnızca kalıcı gövde içeriğinin kaydırılmasını sağlar. Kullanmak için, sadece sınıf eklemek modal-iletişim-kaydırılabilir vardır aynı div modal-dialog sınıfı.

İşte bir örnek:

<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>

Carlos Calla'ye Ekleme 'nın büyük bir cevap.

.Modal-body yüksekliği ayarlanmalıdır, AMA ekran boyutuna uygun olduğundan emin olmak için medya sorgularını kullanabilirsiniz.

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

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

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

İsteğe bağlı : Kipin pencere yüksekliğini aşmasını ve .modal gövdesinde bir kaydırma çubuğu kullanmasını istemiyorsanız, bu duyarlı çözümü kullanabilirsiniz. Burada çalışan bir demoya bakın: 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'));
  }
});

Bunun eski bir konu olduğunu biliyorum ama bu başka birine yardımcı olabilir.

Kalıcı diyalog elemanı konumunu sabitleyerek gövdeyi kaydırmayı başardım. Ve tarayıcı penceresinin tam yüksekliğini asla bilemeyeceğimden, emin olduğum bilgiyi, üstbilgi ve altbilginin yüksekliğini aldım. Daha sonra modal gövde elemanının üst ve alt kenar boşluklarını bu yüksekliklerle eşleştirdim. Bu daha sonra aradığım sonucu üretti. Çalışmamı göstermek için bir keman attım.

Ayrıca, tam ekran iletişim istiyorsanız genişlik yorumunu kaldırın: auto; .modal-dialog.full-screen bölümünde.

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

Ve burada bootstrap iletişim kutusunu değiştirmek için kullandığım css.

.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;
}

Veya daha basit olarak önce etiketlerinizin arasına, sonra css sınıfına koyabilirsiniz.

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

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

Kullanımı max-heightile vhilgili birim olarak modal-bodyveya bir sarıcı div iç modal-body. Bu, modal-bodybir kullanıcı pencereyi yeniden boyutlandırdığında bölme yüksekliğinin veya kaydırma div'inin (bu örnekte) otomatik olarak yeniden boyutlandırılmasını sağlar.

vh görünüm yüksekliği için görünüm boyutunun% 1'ini temsil eden uzunluk birimidir.

vhBirim için tarayıcı uyumluluk tablosu .

Örnek: https://jsfiddle.net/q3xwr53f/

Benim için işe yarayan, yüksekliği% 100'e ayarlamak, otomatik olarak taşması

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

Modal yüksekliği vücudun yüksekliği ile orantılı olarak ayarlamak için basit bir js çözümü:

$(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>');
});

vücudun yüksekliği% 100 olmalıdır:

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

Kalıcı vücut yüksekliğini vücudun% 80'ine ayarladım, bu elbette özelleştirilebilir.

Umarım yardımcı olur.

En son bootstrap versiyonunda modal gövdeyi kaydırılabilir yapmak için bir sınıf var.

.modal-iletişim-kaydırılabilir için .modal-iletişim .

Kalıcı gövde kaydırılabilir içeriği için bootstrap kalıcı bağlantısı

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