부트스트랩 modal 에서 내용 부분만 스크롤 기능 하기

부트스트랩 modal 기능을 사용하면서 body 안에 내용이 많을 경우 전체적인 scroll 이 되어서 사용자가 중간에 화면을 닫고 싶을 경우 스크롤을 움직여야 하는 불편한 상황이 발생하여 body 내용 부분만 스크롤 기능이 되고 제목 부분과 아래 부분은 고정이 되어 언제든지 닫기 버튼을 클릭 할 수 있는 부분으로 수정을 함.

 

참고 사이트 : https://stackoverflow.com/questions/25874001/how-to-put-scrollbar-only-for-modal-body-in-bootstrap-modal-dialog

 

스크립트 부분

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

css 부분

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

화면에 높이가 넘어갈 경우 스크립트 부분의 .8 부분을 수정하여 맞추면 됨.