Problem to set focus about bootstrap-modal

[jschr]

Make sure you have tabindex="-1" set on the modal element in order to enable focus. This is also true for Bootstrap's default modals so you'll notice them in the examples in the documentation: http://twitter.github.com/bootstrap/javascript.html#modals

[ericalves]

Hi!

My div have tabindex but don't work with your modal.. although with the default bootstrap works.. can you help me?

[jschr]

Are you able to provide a jsfiddle of the issue? It would help me figure out what is going on.

Thanks

[ericalves]

Hi!
Sorry, the error was mine!
But I have one more question.. if I use TAB to change the focus on controls. allows set focus on the main page in back of the modal.. how do I avoid this?

thank you again!

[jschr]

Interesting question, this is more of a general problem as it is difficult to have a tabindex for a section in the page (you'll find a couple questions on stackoverflow about this).

Here's what I came up with to solve your problem (tweak as necessary):

$('.modal').on('keydown', '[data-tabindex]', function(e){
  if (e.keyCode && e.keyCode == 9){
    var $next = $rollover = $(this);

    $(e.delegateTarget).find('[data-tabindex]').each(function(e){
      if (!e.shiftKey){
        $next = $next.data('tabindex') < $(this).data('tabindex') ?
          $next = $(this) :
          $rollover = $(this);
      } else {
        $next = $next.data('tabindex') > $(this).data('tabindex') ?
          $next = $(this) :
          $rollover = $(this);
      }

    });

    $next[0] !== $(this)[0] ?
      $next.focus() : $rollover.focus();

    e.preventDefault();
  }
});

Check out the stackable example on the demo page to see how to use it.

[jschr]

This functionality is now provided by default in the current wip-2.0 branch