bootstrap中为什么要给modal添加tabindex=-1才能通过tab键在modal中切换焦点
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" 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">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>上面是从菜鸟教程拷贝的代码，如果模态框（modal）不设置tabindex="-1"，可以通过tab键切换除模态框外的其他元素的焦点，模态框设置了tabindex='-1'，tab键只能切换模态框内的元素的焦点。希望有大神能解释下其中的原理，先行感谢！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
很明显，tabindex的作用就是控制tab切换的顺序按照它的值来切换！
而且最小的tabindex=1；也就是从1开始，那么如果设置为-1,就表示modal框脱离了全局html的tab切换页面，独立出来，最终形成你要的结果！
详细说明看这个：TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字 的说明
modal中的tab-index=-1其实有点问题。比如在和ckeditor配合使用时，会导致
红框不能选中，不能输入内容。所以将 这个modal 中的tab-index = -1 属性删除之后，就可以正常选中了。
之前使用 配合 select2 使用的时候，也会碰到这种问题，同样的解决方法