使用 Bootstrap 3 模态框只能通过按钮关闭

在 Bootstrap 3 中，模态框默认可以通过点击模态框外的区域或按下键盘上的 “ESC” 键关闭，但是我们可能需要控制模态框只能通过按钮关闭。本文将介绍如何实现这个需求。

实现方式

方式一：使用 backdrop 属性

在 Bootstrap 3 的模态框中，backdrop 属性用来设置是否允许点击模态框外的区域关闭模态框。默认值为 true，即允许关闭。

如果我们要实现只能通过按钮关闭模态框的需求，只需要将 backdrop 属性的值设置为 "static"，就可以禁止点击模态框外的区域关闭模态框了。

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Modal content here...</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

在上面的代码中，我们将模态框的 data-backdrop 属性设置为 "static"，并且在模态框的底部添加了两个按钮，其中关闭按钮使用了 data-dismiss="modal" 属性来关闭模态框。

方式二：通过编程方式控制关闭

除了使用 backdrop 属性来控制是否允许点击模态框外的区域关闭模态框之外，还可以通过编程方式来控制模态框是否可以关闭。

在 Bootstrap 3 的 JavaScript API 中，可以使用 modal() 方法来控制模态框。其中，modal() 方法有一个 options 参数，可以用来设定模态框的选项。在选项中，有一个 keyboard 属性，用来控制是否允许按下键盘上的 “ESC” 键关闭模态框。同样地，我们将这个属性设置为 false，就可以禁止按下 “ESC” 键关闭模态框了。

$('#myModal').modal({
  keyboard: false
})

在上面的代码中，我们将一个 ID 为 myModal 的模态框使用了 modal() 方法，并且在选项中设置了 keyboard 属性为 false，来禁止按下键盘上的 “ESC” 键关闭模态框。

结论

在 Bootstrap 3 中，可以通过设置 backdrop 属性或使用编程方式控制模态框的关闭行为，来实现只能通过按钮关闭模态框的需求。