使用Bootstrap自定义确认框

大家都知道浏览器自带的确认框在不同的浏览器上显示不一样的UI，Bootstrap我们可以自定义一个确认框组件，给用户提供统一的外观。

首先我们设计确认框的外观。确认框的外观虽然不统一，但基本上都是头部显示标题，中间显示消息正文，底部显示确认取消按钮。借助Bootstrap的Form可以很容易设计出来：

<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的实现方式。

/**
 * 确认框
 */
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这个参数的。

这里我们并没有使用动态加载模板的方式而是将其封闭在JavaScript文件中，这样组件的性能会好一些。至于要自定义警告框，只是少一具取消按钮而已。

github：03-confirm。

查看效果：点击确认框、确认框按钮，可以看到两个自定义组件的效果。