如何使⽤Bootstrap的modal组件⾃定义alert，confirm和modal
对话框
本⽂我将为⼤家介绍Bootstrap中的弹出窗⼝组件Modal，此组件简单易⽤，效果⼤⽓漂亮且很实⽤！
jquery是什么功能组件
由于浏览器提供的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: '<button type="button" class="btn btn-sm btn-primary btn-ok">确定</button>',
selector: '.btn-ok',
callback: function(){
//点击确定按钮的回调
}
},
{
html: '<button type="button" class="btn btn-sm btn-default btn-cancel">取消</button>',
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中调⽤实例
接下来演⽰下我在完成这三个组件开发之后，实际使⽤过程中调⽤这些组件的⽅式：
var modal = new Modal({
title: '测试modal',
content: $('#modal-tpl').html(),
width: 500,
onOk: function(){
var $form = this.$modal.find('form');
var data = $form.serializeArray();
var postData = {};
data.forEach(function(obj){
postData[obj.name] = obj.value;
});
if(!ail) {
Alert('请输⼊EMAIL!');
return false;
}
var deferred = $.Deferred();
if(!postData.password) {
Confirm({
msg: 'Password为空，是否要继续？',
onOk: function(){
_post();
},
onCancel: function(){
}
})
} else {
_post();
}
return $.when(deferred);
function _post(){
//模拟异步任务
setTimeout(function(){
ail === 'admin@admin') {
Alert({
msg: '提交成功！',
onOk: function(){
}
});
} else {
Alert({
msg: '提交失败！',
onOk: function(){
}
});
}
},3000);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。