大家都知道浏览器自带的确认框在不同的浏览器上显示不一样的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,点击确认框、确认框按钮,可以看到两个自定义组件的效果。