다음과 같은 요소가 있습니다.
<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">×</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;
}