Bootstrap自定义确认框

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

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

 <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">确认要删除</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>

注意我们在这里根据实际需求省去标题，确认对话框加上了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：https://github.com/szriafan/bootstrap-tips/tree/03-confirm。
查看效果：https://szriafan.github.io/bootstrap-tips/app，点击确认框、确认框按钮，可以看到两个自定义组件的效果。