話不多說，首先你得去bootStrap官網(wǎng)下載很基礎(chǔ)的bootStrap包讥邻。（www.bootcss.com）引用“bootstrap.min.js”和“bootstrap.min.css”包到你的工程赃绊。
<bootStrapModal.html>
<button type="button" style="display: none" data-toggle="modal" data-target="#myModal_info"></button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade " id="myModal_info" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff">×</button>
<h4 class="modal-title" style="font-size: 16px;" >消息</h4>
</div>
<div class="modal-body">
<div style="text-align: center;font-size: 20px;font-family: Microsoft YaHei;color: #333333;">
<img style="margin-right:6px;width: 40px;height: 40px;vertical-align: middle;">
<span style="vertical-align: middle"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
<i class="fa fa-check"></i>
<span>確定</span>
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button type="button" style="display: none" data-toggle="modal" data-target="#myModal_confirm"></button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade " id="myModal_confirm" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1070;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #fff">×</button>
<h4 class="modal-title" style="font-size: 16px;" >確定</h4>
</div>
<div class="modal-body">
<div style="text-align: center;font-size: 16px;font-family: Microsoft YaHei;color: #333333;">
<span style="vertical-align: middle"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
<i class="fa fa-check"></i>
<span>確定</span>
</button>
<button type="button" class="btn btn-default form-control-nolabel" data-dismiss="modal">
<i class="fa fa-mail-reply"></i>
<span>取消</span>
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
將上面的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();
當然上面的那些圖標可以自己設(shè)置登颓，主要是為了美觀月帝。引用只要在自己定義的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)
