javascript - Jscrollpane 和 Bootstrap 模式不工作

Question

我在网站上实现了一个来自 Bootstrap 的模式。问题是我需要将默认滚动条从溢出 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