bootstrapmodel确认操作框_如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框...

本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用！

由于浏览器提供的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

Alert('您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！');

//2

Alert({

msg: '您选择的订单状态不符合当前操作的条件，请刷新列表显示最新数据后再继续操作！',

onOk: function(){

}

});

第一种是没有回调的情况，那么直接传递msg即可，第二种是有回调的情况，用options对象的方式来传递msg和onOks回调这两个参数。不管onOk回调有没有，点击按钮的时候都要关闭弹框。

2)自定义confirm框

这个框的原型跟alert框只差一个按钮：

调用形式只有一种：

Confirm({

msg: '您选择的订单状态不符合当前操作的条件，请确认是否要继续操作！',

onOk: function(){

},

onCancel: function(){

}

});

onCancel是在点击取消按钮时候的回调。不管onOk和onCancel回调有没有，点击按钮的时候都要关闭弹框。onCancel回调可以没有。

3)自定义modal框

原型：

调用形式：

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()