Question

这是一个非常简单的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    <input type="text" value="foo"/>
    <button type="button" class="btn btn-default"
            data-toggle="modal" data-target="#dlg">open</button>
    <div id="dlg" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <input type="text"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                            data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我希望对话框真正表现为模态，即在打开时禁止跳转到第一个输入字段。此外，对话框中的输入字段应该集中在打开状态。

这不会发生。重点是打开其他地方（可能是打开按钮），我可以在所有控件上进行选项卡。

Answer 1

当显示模态时，默认情况下Bootstrap会聚焦整个模态（出于可访问性的原因），而不是特定于其中的任何内容，因为不是每个人都希望自己的模态中的内容能够自动聚焦。有些人使用＆＃34;模态＆＃34;对于那些不严格对话的东西（例如显示地图或视频）但请参阅https://github.com/twbs/bootstrap/issues/12525

通过使用一些JS来监听the shown.bs.modal event然后在事件处理函数中执行聚焦，可以在显示模态时将内容集中在模态中。例如：

$('#your-modal').on('shown.bs.modal', function () {
  $('#your-input').focus();
});

不确定如何解决不要让用户选项卡填充模式之外的问题＆＃34;你问题的一部分。 jQuery UI使用的方法看起来并不太优雅，但它只是一个选项：How does jQuery UI Dialog disable focus on background inputs?

Answer 2

这就像在我的对话框中添加tabindex="-1"一样简单。

Bootstrap模态不表现为模态

2 个答案: