由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。（代码下载）
1. 实例展示
详细的代码可通过前面给出的下载链接下载源码去了解，代码量不大，这三个组件加起来只有200多行
如果你有javascript的组件开发经验，我这个层级的代码相信你一下子就能看明白。源码中我还给出了一个demo，这个demo模拟了一个比较贴近现实需求的一个场景：
1）用户点击界面上的某个按钮，打开之前定义的一个modal框：
2）用户在打开的modal框内填写一些表单，点击确定的时候，会触发一些校验：
没填email时：
填写了email之后：
这两个提示其实是为了演示Alert和Confirm的效果硬塞进去的，实际上可能没有这么别扭的功能。
3）在提示Password为空的时候，细心的人会发现那个确定按钮处于一个禁用的状态，这个考虑是因为确定按钮最终要完成的是一些异步任务，在异步任务成功完成之前，我希望modal组件都不要关闭，并且能够控制已点击的按钮不能重复点击；
4）我用setTimeout模拟了一个异步任务，这个异步任务在点击确定按钮之后，3s才会回调，并且：
当email输入admin@admin 的时候，会给出提交成功的提示，确定之后就会关闭所有的弹框：
当email输入其它值得时候，会给出提交失败的提示，并且modal框会依然显示在那里：
在组件定义里面，尤其是注册按钮这一块，我加了一些AOP编程的处理，同时利用了jquery的延迟对象，来实现我需要的异步编程，详情请阅读源码，有问题可以在评论区交流赐教。
2. 组件需求
有时候为了写一个好用的组件，只需要把它的大概原型和要对外部提供的接口确定下来，就已经完成这个组件编写最重要的工作了，虽然还没有开始编码。以本文要编写的这几个组件来说，我想要的这几个组件的原型和调用形式分别是这样的：
1）自定义alert框
原型是：
调用时最多需要两个参数，一个msg用来传递要显示的提示内容，一个onOk用来处理确定按钮点击时候的回调，调用形式有以下2种：
|
1 2 3 4 5 6 7 8 |
//1 Alert('您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！'); //2 Alert({ msg: '您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！', onOk: function(){ } }); |
第一种是没有回调的情况，那么直接传递msg即可，第二种是有回调的情况，用options对象的方式来传递msg和onOks回调这两个参数。不管onOk回调有没有，点击按钮的时候都要关闭弹框。
2）自定义confirm框
这个框的原型跟alert框只差一个按钮：
调用形式只有一种：
|
1 2 3 4 5 6 7 8 9 |
Confirm({ msg: '您选择的订单状态不符合当前操作的条件，请确认是否要继续操作！', onOk: function(){ }, onCancel: function(){ } }); |
onCancel是在点击取消按钮时候的回调。不管onOk和onCancel回调有没有，点击按钮的时候都要关闭弹框。onCancel回调可以没有。
3）自定义modal框
原型：
调用形式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var modal = new Modal({ title: '', content: '', width: 600, buttons: [ { html: '确定', selector: '.btn-ok', callback: function(){ //点击确定按钮的回调 } }, { html: '取消', selector: '.btn-cancel', callback: function(){ //点击取消按钮的回调 } } ], onContentReady: function(){ //当modal添加到DOM并且初始化完毕时的事件回调，每个modal实例这个回调只会被触发一次 }, onContentChange: function(){ //当调用modal.setContent类似的方法改变了modal内容时的事件回调 }, onModalShow: function(){ //当调用modal.open类似方法显示modal时都会触发的事件回调 }, onModalHide: function(){ //当调用modal.hide类似方法隐藏modal时都会触发的事件回调 } }); $('#btn-audit').click(function(){ modal.open(); }); |
跟Alert和Confirm不同的是，一个页面里面只需要一个Alert和Confirm的实例，但是可能需要多个Modal的实例，所以每个Modal对象都需要单独new一下。由于每个Modal要完成的事情都不相同，所以：
需要一个title参数来设置名称，表达这个Modal正在处理的事情；
content参数表示Modal的html内容；
width参数设置Modal的宽度，Modal的高度保持auto；
buttons参数用来配置这个Modal上面的按钮，一般情况下Modal组件只需要两个按钮（确定和取消）就够了，但也有少数情况需要多个按钮，所以把按钮做成配置的方式相对灵活一点，每个按钮用三个参数来配置，html表示按钮的html结构，selector方便注册回调的时候通过事件委托的方式来处理，callback配置按钮点击时的回调；
onContentReady这个事件回调，可以在Modal初始化完毕的时候，主动去初始化Modal内部html的一些组件；由于组件初始化一般只进行一次，所以放在这个回调里面最合适；
onContentChange回调，在一个Modal需要被用作不同的场景，显示不同的HTML的内容时会派上用场，但是不是非常的好用，处理起来逻辑会稍微偏复杂，如果一个Modal实例只做一件事情的时候，onContentChange这个回调就用不到了；
onModalShow这个回调在每次显示Modal的时候都会显示，使用的场景有很多，比如某个Modal用来填写一些表单内容，下次填写的时候需要reset一下表单才能给用户使用，这种处理在这个回调里面处理就比较合适；
onModalHide这个回调有用，不过能够用到的场景不多，算是预留的一个接口。
4）其它需求
所有类型的弹框都做成虚拟模态的形式，显示框的同时加一个遮罩；
所有框都不需要支持拖动和大小调整；
alert和dialog框的标题，按钮数量、按钮位置、按钮文字都固定。
实际上：
遮罩这个效果，bootstrap的modal组件本身就已经支持了；
拖动和大小调整，这个功能属于锦上添花，但是对软件本身来说，并一定有多少额外的好处，所以我选择不做这种多余的处理；
alert和dialog不需要做太过个性化，能够统一风格，改变浏览器原生的弹框体验即可。
5）DEMO中调用实例
接下来演示下我在完成这三个组件开发之后，实际使用过程中调用这些组件的方式：
onCancel是在点击取消按钮时候的回调。不管onOk和onCancel回调有没有，点击按钮的时候都要关闭弹框。onCancel回调可以没有。
3）自定义modal框
原型：
调用形式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var modal = new Modal({ title: '', content: '', width: 600, buttons: [ { html: '确定', selector: '.btn-ok', callback: function(){ //点击确定按钮的回调 } }, { html: '取消', selector: '.btn-cancel', callback: function(){ //点击取消按钮的回调 } } ], onContentReady: function(){ //当modal添加到DOM并且初始化完毕时的事件回调，每个modal实例这个回调只会被触发一次 }, onContentChange: function(){ //当调用modal.setContent类似的方法改变了modal内容时的事件回调 }, onModalShow: function(){ //当调用modal.open类似方法显示modal时都会触发的事件回调 }, onModalHide: function(){ //当调用modal.hide类似方法隐藏modal时都会触发的事件回调 } }); $('#btn-audit').click(function(){ modal.open(); }); |
跟Alert和Confirm不同的是，一个页面里面只需要一个Alert和Confirm的实例，但是可能需要多个Modal的实例，所以每个Modal对象都需要单独new一下。由于每个Modal要完成的事情都不相同，所以：
需要一个title参数来设置名称，表达这个Modal正在处理的事情；
content参数表示Modal的html内容；
width参数设置Modal的宽度，Modal的高度保持auto；
buttons参数用来配置这个Modal上面的按钮，一般情况下Modal组件只需要两个按钮（确定和取消）就够了，但也有少数情况需要多个按钮，所以把按钮做成配置的方式相对灵活一点，每个按钮用三个参数来配置，html表示按钮的html结构，selector方便注册回调的时候通过事件委托的方式来处理，callback配置按钮点击时的回调；
onContentReady这个事件回调，可以在Modal初始化完毕的时候，主动去初始化Modal内部html的一些组件；由于组件初始化一般只进行一次，所以放在这个回调里面最合适；
onContentChange回调，在一个Modal需要被用作不同的场景，显示不同的HTML的内容时会派上用场，但是不是非常的好用，处理起来逻辑会稍微偏复杂，如果一个Modal实例只做一件事情的时候，onContentChange这个回调就用不到了；
onModalShow这个回调在每次显示Modal的时候都会显示，使用的场景有很多，比如某个Modal用来填写一些表单内容，下次填写的时候需要reset一下表单才能给用户使用，这种处理在这个回调里面处理就比较合适；
onModalHide这个回调有用，不过能够用到的场景不多，算是预留的一个接口。
4）其它需求
所有类型的弹框都做成虚拟模态的形式，显示框的同时加一个遮罩；
所有框都不需要支持拖动和大小调整；
alert和dialog框的标题，按钮数量、按钮位置、按钮文字都固定。
实际上：
遮罩这个效果，bootstrap的modal组件本身就已经支持了；
拖动和大小调整，这个功能属于锦上添花，但是对软件本身来说，并一定有多少额外的好处，所以我选择不做这种多余的处理；
alert和dialog不需要做太过个性化，能够统一风格，改变浏览器原生的弹框体验即可。
5）DEMO中调用实例
接下来演示下我在完成这三个组件开发之后，实际使用过程中调用这些组件的方式：
|
1 2 3 4 5 6 7 8 9 yon-5812cf859df3e089329161-10">10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
|
var modal = new Modal({ title: '测试modal', content: $('#modal-tpl').html(), width: 500, onOk: function |
