自定义 Bootstrap 确认框

前面文章我们已经讨论了怎样自定义 Bootstrap 下拉框，本文将探讨它的另一个自定义功能：自定义 Bootstrap 确认框。

问题

大家都知道浏览器自带的确认框在不同的浏览器上显示不一样的 UI，Bootstrap 我们可以自定义一个确认框组件，给用户提供统一的外观。
首先我们设计确认框的外观。确认框的外观虽然不统一，但基本上都是头部显示标题，中间显示消息正文，底部显示确认取消按钮。

bootstrap

解决办法

借助 Bootstrap 的 Form 可以很容易设计出来。

html 代码


<h2>创建模态框</h2>
<button id="loginBtn" class="btn btn-default" data-toggle="modal"
  data-target="#loginModal" data-remote="login.html">登录
</button>
<button id="confirmBtn" class="btn btn-default">确认框</button>
<button id="alertBtn" class="btn btn-default">警告框</button>
<form class="modal fade" id="loginModal" tabindex="-1"
  role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content"></div>
  </div>
</form>

注意：我们在这里根据实际需求省去标题，确认对话框加上了 modal-sm 让确认框看起来小一些。然后通过 data 属性或通过 JavaScript 就可以弹出确认框了。怎样通过 data 属性来实现请参看前面的实例。现在我们讲解其 JavaScript 的实现方式。

js 代码

/**
 * 确认框
 */
var confirm = {
  /**
   * 显示确认框
   * @param message
   * @param callback
   */
  show: function (message, callback) {
    var html = '<form class="modal fade" id="confirmModal" tabindex="-1"' +
      'role="dialog" aria-hidden="true" data-backdrop="static">' +
      '<div class="modal-dialog modal-sm">' +
      '<div class="modal-content">' +
      '<div class="modal-body">' + message + '</div>' +
      '<div class="modal-footer" align="center">' +
      '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>' +
      '<button type="submit" class="btn btn-primary">确定</button>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</form>';
    $(document.body).append(html);
    $('#confirmModal').modal('show').on('hide.bs.modal', function () {
      $(this).remove();
    }).submit(function (e) {
      e.preventDefault();
      if (typeof callback === 'function') {
        callback();
      }
    });
  },
  /**
   * 移除确认框
   */
  remove: function () {
    $('#confirmModal').modal('hide');
  }
};

如上面的代码该有确认框有两个方法，show 方法添加确认框，remove 方法移除确认框。由于我们是将确认框的代码片段追加到 body 中，因此每次关闭时都要移除先前的内容，不然确认框就重复了。另外，show 方法还会处理点击确认按钮的回调函数，一般场景都是要传 callback 这个参数的。