使用bootstrap 3 modal open调用bootbox会使bootstrap modal在bootbox关闭时失去焦点

当你使用Bootstrap 3的模态框（modal）和Bootbox.js库时，确实可能会遇到这个问题。这是因为Bootbox.js在创建弹出框时会移除Bootstrap模态框的焦点，导致Bootstrap模态框在Bootbox关闭时失去焦点。

要解决这个问题，你可以尝试以下方法：

方法一：使用Bootstrap的模态框API

初始化Bootstrap模态框：确保你的Bootstrap模态框已经正确初始化。 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> Modal content goes here. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
使用Bootstrap的模态框API打开和关闭模态框：使用Bootstrap提供的JavaScript API来控制模态框的显示和隐藏。 $('#myModal').modal('show'); // 打开模态框 $('#myModal').modal('hide'); // 关闭模态框

方法二：手动管理焦点

如果你仍然想使用Bootbox.js，可以手动管理焦点，确保Bootstrap模态框在Bootbox关闭后重新获得焦点。

打开Bootbox弹出框：使用Bootbox.js打开弹出框。 bootbox.dialog({ message: "I am a custom dialog", buttons: { success: { label: "Success!", className: "btn-success", callback: function() { // 关闭Bootbox弹出框后，手动将焦点设置回Bootstrap模态框 $('#myModal').modal('show'); } }, danger: { label: "Danger!", className: "btn-danger", callback: function() { // 关闭Bootbox弹出框后，手动将焦点设置回Bootstrap模态框 $('#myModal').modal('show'); } } } });
确保Bootstrap模态框在Bootbox关闭后重新获得焦点：在Bootbox的回调函数中，手动调用Bootstrap模态框的show方法。

示例代码

以下是一个完整的示例，展示了如何结合使用Bootstrap模态框和Bootbox.js，并确保Bootstrap模态框在Bootbox关闭后重新获得焦点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Modal with Bootbox</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
</head>
<body>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Modal content goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button id="openBootbox" class="btn btn-primary">Open Bootbox</button>

<script>
  $(document).ready(function() {
    $('#openBootbox').click(function() {
      bootbox.dialog({
        message: "I am a custom dialog",
        buttons: {
          success: {
            label: "Success!",
            className: "btn-success",
            callback: function() {
              $('#myModal').modal('show');
            }
          },
          danger: {
            label: "Danger!",
            className: "btn-danger",
            callback: function() {
              $('#myModal').modal('show');
            }
          }
        }
      });
    });
  });
</script>

</body>
</html>

通过上述方法，你可以确保Bootstrap模态框在Bootbox关闭后仍然保持焦点。