bootstrap中为什么要给modal添加tabindex=-1才能通过tab键在modal中切换焦点

最新推荐文章于 2025-03-20 18:03:07 发布

ok060

最新推荐文章于 2025-03-20 18:03:07 发布

阅读量589

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/ok060/article/details/136639686

版权

本文详细解释了Bootstrap模态框（Modal）中tabindex属性的作用，特别是当其值设为-1时，如何使模态框独立于页面的tab切换，只在内部元素间切换焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
                  &times;
            </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键只能切换模态框内的元素的焦点。希望有大神能解释下其中的原理，先行感谢！
很明显，tabindex的作用就是控制tab切换的顺序按照它的值来切换！

tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。

而且最小的tabindex=1；也就是从1开始，那么如果设置为-1,就表示modal框脱离了全局html的tab切换页面，独立出来，最终形成你要的结果！
详细说明看这个：TabIndex 属性 Tabindex=“-1” 与Tabindex=“0”、任意数字的说明