Jscrollpane,引导模式不工作

Jscrollpane & Bootstrap modal not working

本文关键字：工作 模式 Jscrollpane      更新时间：2023-09-26

我有一个模态从bootstrap，我已经在网站上实现。问题是，我需要将默认滚动条从溢出css更改为jscrollpane，以便我可以自定义滚动条。它可以正常工作，但我不能把它放在modal

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

同样，它在其他元素上工作，为什么它不能在模态中工作?请提供解决方案，提前感谢

我刚刚为您创建了工作演示。

$(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

相关文章：