话不多说，首先你得去bootStrap官网下载很基础的bootStrap包。（www.bootcss.com）引用“bootstrap.min.js”和“bootstrap.min.css”包到你的工程。
将上面的html片段导入你整个工程的共同html里面，然后你们工程一定会有一个common.js。
function bootStrapDialog() {
var me = this;
me.info = function(msg,type,okCallback){
if(type == 'success') {
$("#myModal_info").modal('show');
$("#myModal_info .modal-body").find('img').attr('src','/images/icon/success_icon.png');
$("#myModal_info .modal-body").find('span').html(msg);
$("#myModal_info .btn-primary").click(function(){
if (okCallback && typeof okCallback === 'function') {
okCallback();
//移除当前的confirm方法
$(this).unbind('click');
}
})
}else if(type == 'wrong') {
$("#myModal_info").modal('show');
$("#myModal_info .modal-body").find('img').attr('src','/images/icon/shanchu_icon.png');
$("#myModal_info .modal-body").find('span').html(msg);
$("#myModal_info .btn-primary").click(function(){
if (okCallback && typeof okCallback === 'function') {
okCallback();
//移除当前的confirm方法
$(this).unbind('click');
}
})
}else if(type == 'info') {
$("#myModal_info").modal('show');
$("#myModal_info .modal-body").find('img').attr('src','/images/icon/info_icon.png');
$("#myModal_info .modal-body").find('span').html(msg);
$("#myModal_info .btn-primary").click(function(){
if (okCallback && typeof okCallback === 'function') {
okCallback();
//移除当前的confirm方法
$(this).unbind('click');
}
})
}
};
me.confirm = function(msg,type,okCallback){
if(type == 'choose') {
$("#myModal_confirm").modal('show');
$("#myModal_confirm .modal-body").find('img').attr('src','/images/icon/why_icon.png');
$("#myModal_confirm .modal-body").find('span').html(msg);
$("#myModal_confirm .btn-primary").click(function(){
if (okCallback && typeof okCallback === 'function') {
okCallback();
//移除当前的confirm方法
$(this).unbind('click');
}
});
$("#myModal_confirm .btn-default").click(function(){
//移除当前的confirm方法
$("#myModal_confirm .btn-primary").unbind('click');
})
}else if(type == 'noImg') {
$("#myModal_confirm").modal('show');
$("#myModal_confirm .modal-body").find('img').css('display','none');
$("#myModal_confirm .modal-body").find('span').html(msg);
$("#myModal_confirm .btn-primary").click(function(){
if (okCallback && typeof okCallback === 'function') {
okCallback();
//移除当前的confirm方法
$(this).unbind('click');
}
});
$("#myModal_confirm .btn-default").click(function(){
//移除当前的confirm方法
$("#myModal_confirm .btn-primary").unbind('click');
})
}
};
me.error = function(msg,ele,ele_label) {
$(ele).addClass('has-error');
$(ele_label).addClass('has-error-label');
$(ele).attr('data-toggle','tooltip');
$(ele).attr('data-placement','top');
//$(ele).attr('aria-required',true);
// $(ele).attr(' data-trigger','manual');
$(ele).attr('data-original-title',msg);
$(ele).tooltip({
trigger:'manual'
});
$(ele).tooltip('show');
/* $(ele).focus();*/
$(ele).change(function(){
$(ele).removeClass('has-error');
$(ele_label).removeClass('has-error-label');
$(ele).tooltip('destroy');
})
};
}
var bootStrapDialog = new bootStrapDialog();
当然上面的那些图标可以自己设置，主要是为了美观。引用只要在自己定义的js里面
bootStrapDialog.info('msg','success',function(){});
bootStrapDialog.info('msg','wrong',function(){});
bootStrapDialog.confirm('msg','choose',function(){});
下面放截图：
info_wrong.png
 ](http://upload-images.jianshu.io/upload_images/4252197-476338779ccfc116.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)