Jscrollpane & Bootstrap 모달이 작동하지 않습니다.

Question

사이트에 구현 한 부트 스트랩의 모달이 있습니다. 스크롤바를 사용자 정의 할 수 있도록 기본 스크롤 막대를 오버플로 CSS에서 jscrollpane으로 변경해야하는 문제가 있습니다. 그것은에 좋아했다하지만 난 바로 모달 그것을

HTML

<div class="modal fade" id="SdanK" tabindex="-1" role="dialog" aria-labelledby="SdanKLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
       &times; 
      </button> 
      <h4 class="modal-title" id="SdanKLabel"> 
       Terms & Conditions 
      </h4> 
     </div> 
     <div class="modal-body scroll-pane"> 
      <p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.<br/><br/> 

       Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.<br/><br/> 

       This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.<br/><br/> 

       Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.<br/><br/> 

       This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.<br/><br/> 

       This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.<br/><br/> 

       Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.<br/></p> 
     </div> 
    </div><!-- /.modal-content --> 
</div> 

그리고 JQuery와

$(document).ready(function() { 

    $(function() 
    { 
     $('.scroll-pane').jScrollPane(); 
    }); 
}); 

CSS

.scroll-pane 
{ 
    width: 885px; 
    height: 100%; 
    overflow: auto; 
} 
.horizontal-only 
{ 
    height: auto; 
    max-height: 600px; 
} 

.scroll-pane .jspContainer .jspVerticalBar .jspTrack .jspDrag { 
    background: url(../images/scrollbar-middle.png); 
} 
.scroll-pane .jspContainer .jspVerticalBar .jspTrack { 
    background: url(../images/scrollbar-behind.png); 
} 
.scroll-pane .jspContainer .jspVerticalBar { 
    background: none; 
} 

다시 넣을 수 없습니다 , 그것은 다른 요소들, w 모달로 작동 할 수없는거야? 솔루션을 제공해주십시오. 미리 감사드립니다.

Answer 1

방금 ​​데모 작업을 만들었습니다.

$(function() { 
    $('.modal').on('shown.bs.modal', function (e) { // This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. 
    $('.scroll-pane').jScrollPane(); 
    }); 
}); 

작업 데모

http://jsbin.com/mumehesa/1/edit