Jak umieścić pasek przewijania tylko dla ciała modalnego?


165

Mam następujący element:

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

Pokazuje takie okno dialogowe, w zasadzie umieszcza pasek przewijania wokół całego modal-dialogi nie modal-bodyzawiera treści, które próbuję wyświetlić.

Obraz wygląda mniej więcej tak:

wprowadź opis obrazu tutaj

Jak ustawić modal-bodytylko pasek przewijania dookoła ?

Próbowałem przypisać style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"do, modal-bodyale to nie zadziałało.


1
Podaj działającą próbkę, aby uzyskać lepszą pomoc. Możesz to zrobić, korzystając z bootply.com/new .
Carlos Calla

Następnie zezwól na opcjonalne bloki nagłówka i stopki w trybie płynnym w trybie modalnym, aby przewijało się tylko
treść

Odpowiedzi:


298

Trzeba ustawić heightz .modal-bodywi dać overflow-y: auto. Zresetuj również .modal-dialogwartość przepełnienia do initial.

Zobacz próbkę roboczą:

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

Dzięki za to. Działa świetnie. Może coś nie jest dla mnie jasne w css. Próbowałem przypisać maksymalną wysokość ciała modalnego: 65%, ale to nie działa. Rozwiązanie, które podałeś, działa tylko wtedy, gdy przypiszę stałą wysokość do ciała modalnego. Czy nie można powiedzieć, że okno dialogowe modalne zajmuje 85% okna, a treść okna modalnego powinna zajmować powiedzmy 90% okna dialogowego modalnego? Ale znowu rozwiązanie, które podałeś, działa dla mnie na razie. Dzięki!
Subodh Nijsure,

3
@SubodhNijsure Przepraszamy za spóźnioną odpowiedź. Nie możesz ustawić wysokości w%, ponieważ będzie to oznaczać% jego rodzica, w tym przypadku rodzic to .modal-content, a jego wysokość zależy od jego dzieci. Dlatego nie zadziała, dopóki nie ustawisz jednej z wysokości. Możesz ustawić .modal-content height lub .modal-body height. Jeśli ustawisz wysokość .modal-content, będziesz mógł ustawić wysokość .modal-body w% i będzie to% jego rodzica, więc jeśli ustawisz ją na mniej niż 100%, będzie puste miejsce na na dole, ponieważ nie wypełniasz całej wysokości .modal-content.
Carlos Calla

Pamiętaj, że initialsłowo kluczowe CSS nie działa w przeglądarce Internet Explorer, chociaż działa w Edge.
trysis

18
tylko mały wskaźnik: zamiast „wysokości 250 pikseli”, co może wyglądać brzydko na niektórych telefonach, które mają tylko 230 pikseli wysokości lub mniej z paskiem nawigacyjnym w orientacji poziomej: po prostu użyj max-height: 80vh;80% całkowitej wysokości widocznego obszaru i tylko dla maksymalnej wysokości, a nie wtedy to małe okienko
Toskan

1
działa dobrze, ale po zamknięciu modalu linki w oknie „nadrzędnym” nie są już klikalne ... rozwiązano za pomocą następującego kodu: .modal .modal-body {max-height: 420px; overflow-y: auto; }
cwhisperer

119

Jeśli obsługujesz tylko przeglądarkę IE 9 lub nowszą, możesz użyć tego CSS, który będzie płynnie skalował się do rozmiaru okna. W zależności od wysokości nagłówka lub stopki może być jednak konieczne dostosowanie „200px”.

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

Według [1] i [2] jest to obsługiwane również przez Chrome, Firefox i Safari. [1] developer.mozilla.org/en-US/docs/Web/CSS/... [2] developer.mozilla.org/en-US/docs/Web/CSS/ ...
ctron

Uwaga: To rozwiązanie sprawia, że ​​popover pojawia się pod nagłówkiem lub stopką w zależności od wybranej opcji na górze lub na dole Zobacz te skrzypce, które stworzyłem: jsfiddle.net/2qeo99k3/4 Bez hackowania css działa dobrze po prostu usuń go ze skrzypiec, aby zobaczyć to działa
Marc Roussel

Obejście problemu popover można znaleźć tutaj: stackoverflow.com/questions/45666828/…
Marc Roussel

36

Problem rozwiązany za pomocą rozwiązania łączącego @carlos calla i @jonathan marston.

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

20

Dla wersji Bootstrap> = 4.3

Bootstrap 4.3 dodał nową wbudowaną funkcję przewijania do modali. To sprawia, że przewijana jest tylko treść modalna, jeśli rozmiar treści spowodowałby przewijanie strony. Aby go użyć, po prostu dodaj klasę modal-dialog-scrollable do tego samego elementu div, który ma klasę modal-dialog .

Oto przykład:

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


14

Dodając do wspaniałej odpowiedzi Carlosa Calli .

Wysokość .modal-body musi być ustawiona, ALE możesz użyć zapytań o media, aby upewnić się, że jest ona odpowiednia dla rozmiaru ekranu.

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

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

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

Założenie, że wysokość na urządzeniu mobilnym będzie wynosić 400 pikseli lub więcej, jest błędne. Użycie szerokości do określenia wysokości nie jest w ogóle wykonalnym rozwiązaniem. Jest zbyt wiele przypadków użycia, które mogłyby spowodować zerwanie tego.
Truskawka

2
@Strawberry faktycznie użył min-height (nie min-width) i upewnił się, że podana wysokość jest mniejsza niż min-height w zapytaniu o media. Ponadto podaje on tylko przykład swojego pomysłu, ponieważ zapytanie o media może się znacznie różnić w zależności od tego, co chce osiągnąć PO.
Carlos Calla

12

Opcjonalnie : jeśli nie chcesz, aby modal przekraczał wysokość okna i użyj paska przewijania w .modal-body, możesz użyć tego elastycznego rozwiązania. Zobacz działające demo tutaj: 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'));
  }
});

5

Wiem, że to stary temat, ale może pomóc komuś innemu.

Udało mi się sprawić, że treść przewija się, naprawiając pozycję elementu dialogowego modalnego. A ponieważ nigdy nie poznałbym dokładnej wysokości okna przeglądarki, wziąłem informacje, których byłem pewien, wysokość nagłówka i stopki. Byłem wtedy w stanie dopasować górny i dolny margines elementu ciała modalnego do tych wysokości. To przyniosło rezultat, którego szukałem. Rzuciłem razem skrzypce, aby pokazać swoją pracę.

także, jeśli chcesz mieć pełnoekranowe okno dialogowe, po prostu odznacz szerokość: auto; wewnątrz sekcji .modal-dialog.full-screen.

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

A oto css, którego użyłem do zmodyfikowania okna dialogowego ładowania początkowego.

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

5

Lub, prościej, możesz najpierw umieścić między tagami, a następnie do klasy css.

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

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

Używając max-heightwith vhjako jednostki w modal-bodylub wrapper div wewnątrz modal-body. Spowoduje to automatyczną zmianę wysokości modal-bodylub zawijanego elementu div (w tym przykładzie), gdy użytkownik zmieni rozmiar okna.

vh to jednostka długości reprezentująca 1% wielkości rzutni dla wysokości rzutni.

Tabela zgodności przeglądarki dla vhurządzenia.

Przykład: https://jsfiddle.net/q3xwr53f/


1

To, co zadziałało, to ustawienie wysokości na 100%, mając nadzieję, że przepełnienie na auto pomoże

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

0

Proste rozwiązanie js pozwalające ustawić wysokość modalną proporcjonalną do wzrostu ciała:

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

wysokość ciała musi wynosić 100%:

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

Ustawiłem modalną wysokość ciała na 80% ciała, można to oczywiście dostosować.

Mam nadzieję, że to pomoże.


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.