twitter-bootstrap - 使用键盘在 Twitter 的 Bootstrap 2.x 模式弹出窗口中滚动

Question

我正在使用引导模式来显示持续集成式工具的构建日志，而且它们通常很长。我可以使用鼠标滚轮滚动（当然也可以使用滚动条），但是箭头键和 pg-up/pg-dn 不起作用。有没有办法让那些工作？

Answer 1

使用您的模态id="myModal"并将您的内容包装在一个 div 中class="modal-body"：

<script>
    $('#myModal').keydown(function(e) 
    { 
        if(e.keyCode == 40){$('.modal-body').scrollTop($('.modal-body').scrollTop()+10);}
        if(e.keyCode == 38){$('.modal-body').scrollTop($('.modal-body').scrollTop()-10);}

    }); 
</script> 

Answer 2

如果页面中有多个模态并且使用 .modal scrollTop() 将始终返回第一个模态的位置。当您有许多模态时，对于更通用的解决方案，您可以这样做：

$('.modal').keydown(function(e){
    var modalid = $('.modal.fade.in:visible').attr('id');  
    if(e.keyCode == 40){
        $('#'+ modalid +' .modal-body').scrollTop($('#'+ modalid +' .modal-body').scrollTop() + 10);
    }
    if(e.keyCode == 38){
        $('#'+ modalid +' .modal-body').scrollTop($('#'+ modalid +' .modal-body').scrollTop() - 10);
    } 
});