CODEWITHSUNDEEP
jquerytwitter-bootstrap
Itzik Ben Hutta
Itzik Ben Hutta

Reputation: 41

Bootstrap Modal popup not scrolling with keyboard

I'm using bootstrap modal, I added a scroll bar and it works fine with the mouse, but when I use the keyboard only the background page scrolls. What can I do to solve this. This is the css code that I'm using.

.modal .modal-body {
height: 520px;
overflow-y: auto;
 }

I tried this code but it doesn't work 

  $('#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);}

});

Upvotes: 1

Views: 3044

Answers (1)

Duncan Thacker
Duncan Thacker

Reputation: 5188

Keystrokes are only detected by the element that currently has the focus, so your keydown event won't trap anything if the focus is on an element in the background. I suggest doing the following:

  • Making your modal focusable by giving it the tabIndex=-1 attribute
  • Setting it to have the focus when it opens, like this: $("#my-modal").focus()

Upvotes: 7

Related Questions