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

再次，它在其他元素上起作用，为什么它不能在模式中起作用？ 请提供解决方案，并预先感谢您

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