解决 bootstrap 的 modal 对话框按 TAB 会离开对话框的一段代码

bootstrap 是 twitter 出品的一个非常好的 css 框架，全球有无数的网站使用了他。
他的 modal 对话框组件有个键盘访问的 bug 就是按 TAB 键可以离开对话框内部。
我查看源代码发现原因是因为他使用了 focusin 事件。但是一般情况下，我们的对话框代码都是在html 文档的末尾，那么也就意味着按 TAB 键切换到对话框最后一个焦点元素之后，继续按 TAB 键，就会离开网页控件而进入地址栏区域。
解决的办法其实也很简单，就是在 body 元素内部的末尾插入一个具有 tabindex 属性的元素即可。
具体的做法就是在 modal的 shown 事件里插入这个元素，在 hidden 事件里销毁这个元素，或者如果考虑对话框需要多次弹出的话，就直接把这个元素的 tabindex 属性删除。
当然，这个元素不需要被看到，那么就用 .sr-only 让他只对读屏软件有效好了。
示例代码如下：

$("#dialog").on("shown.bs.modal", function(e) {
  var sr = $('#sr-only-modal');
  if(sr.length < 1) {
    $('body').append('<div class="sr-only" id="sr-only-modal" tabindex="0"></div>');
  } else {
    sr.attr('tabindex','0');
  }
});
$("#dialog").on("hidden.bs.modal", function(e) {
  $('#sr-only-modal').removeAttr('tabindex');
});