[css] 모달 바디에만 스크롤 막대를 두는 방법은 무엇입니까?

다음과 같은 요소가 있습니다.

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

그것은 모달 대화 상자를 다음과 같이 보여줍니다. 기본적으로 스크롤 막대를 전체 주위에 놓고 표시하려는 내용이 포함되어 modal-dialog있지 않습니다 modal-body.

이미지는 다음과 같습니다.

스크롤 막대 modal-body만 어떻게 구합니까?

할당 style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;"을 시도했지만 modal-body작동하지 않았습니다.

답변

당신은 설정해야 height의를 .modal-body에 그것을 제공 overflow-y: auto. .modal-dialog오버플로 값 도로 재설정하십시오 initial.

작업 샘플을 참조하십시오.

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

답변

IE 9 이상 만 지원하는 경우이 CSS를 사용하여 창의 크기에 맞게 조정할 수 있습니다. 머리글 또는 바닥 글의 높이에 따라 “200px”를 조정해야 할 수도 있습니다.

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

답변

@carlos calla와 @jonathan marston 결합 솔루션으로 문제가 해결되었습니다.

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

답변

부트 스트랩 버전> = 4.3

Bootstrap 4.3은 새로운 내장 스크롤 기능을 모달에 추가했습니다. 이것은 컨텐츠의 크기가 페이지를 스크롤하는 경우 모달 본문 컨텐츠 만 스크롤하게합니다. 그것을 사용하려면, 단지 클래스 추가 모달 – 대화 – 스크롤 이 같은 사업부에 모달-대화 상자 클래스를.

예를 들면 다음과 같습니다.

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

스 니펫 확장

답변

에게 추가 카를로스 칼라 의 훌륭한 대답.

.modal-body의 높이를 설정해야하지만 미디어 쿼리를 사용하여 화면 크기에 적합한 지 확인할 수 있습니다.

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

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

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

답변

옵션 : 모달이 창 높이를 초과하지 않고 .modal-body에서 스크롤 막대를 사용하지 않으려면이 반응 형 솔루션을 사용할 수 있습니다. 실제 데모를 참조하십시오 : 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'));
  }
});

답변

나는 이것이 오래된 주제라는 것을 알고 있지만 이것은 다른 누군가를 도울 수 있습니다.

모달 대화 상자 요소 위치를 고정시켜 본문을 스크롤 할 수있었습니다. 그리고 브라우저 창의 정확한 높이를 알 수 없으므로 헤더와 바닥 글의 높이, 확실했던 정보를 가져 왔습니다. 그런 다음 모달 바디 요소의 위쪽 및 아래쪽 여백을 해당 높이와 일치시킬 수있었습니다. 그런 다음 내가 찾던 결과를 얻었습니다. 나는 일을 보여주기 위해 바이올린을 함께 던졌다.

또한 전체 화면 대화 상자를 원하면 width : auto의 주석 처리를 제거하십시오. .modal-dialog.full-screen 섹션 내부.

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

그리고 여기 부트 스트랩 대화 상자를 수정하는 데 사용한 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;
}