Bootstrap之BootstrapDialog

http://nakupanda.github.io/bootstrap3-dialog/

. BootstrapDialog.show关闭时刷新/
需要的是关闭的同时刷新页面，其实是可以有任何操作；

BootstrapDialog.show({
title : "消息提醒"，
message : "。。。。",
onhide : function(dialogRef){
location.reload(); 
}
})

e.preventDefault();//阻止a链接的跳转行为

BootstrapDialog.show函数底层简化

http://www.cnblogs.com/yuanpengchao/p/5773892.html
也就是说，只要你要写的界面包含了bootstrap就可以使用这个标准的弹窗；
调用方法；
0、弹窗底层参数介绍
1、title 弹窗标题
2、html 弹窗内容（可以夹带左侧的一个图标自动对齐）
3、url 弹窗关闭后的跳转地址
4、callback function 点击确定后的执行函数
5、flog 是否强制跳转路径
***/
1、基本的乐学一百标准弹窗：
BootstrapDialog1.Init('提示','你好');
当不传递回调函数，与url地址时，确定按钮与取消按钮点击都是关闭弹窗；
2、带有url跳转的弹窗：
BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100');
url可以是任意地址，不局限与乐学地址；点击确定后跳转；
3、带有回调函数的弹窗：
举个例子：

<script type='text/javascript'>
var TESTco={
fun1:function (content) {
alert(content);
}
}
$(function(){
BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100','TESTco.fun1(123);');
});
</script>

运行结果：

当然，不局限与非要传递一个url可以不传递，那么上边的执行结果就是，不跳转，执行函数；可以在函数中做任何事情；
4、强制跳转；
有些弹窗关闭时必须要跳转至某个路径，那么就会用到最后一个参数
标题，内容与URL要传递，可以不传递回调函数，最后将参数设置为true
任何形式的关闭都将自动跳转url 确定按钮，空白处，关闭按钮等；
底层代码：

var BootstrapDialog1={
/***
* 弹窗底层
* @param title 弹窗标题
* @param html 弹窗内容
* @param url 弹窗关闭后的跳转地址
* @callback function 点击确定后的执行函数
* ***/
Init :function(title,html,url,callback,flog){
BootstrapDialog.show({
title : title,
type: BootstrapDialog.TYPE_DEFAULT,
size: BootstrapDialog.SIZE_NORMAL,
message: html,
cssClass:'BootstrapDialog1',
buttons: [{
label: '确定',
action: function(result){
if(callback){
eval(callback);
}
if(url){
window.location.href=url;
}
result.close();
}
},{
label: '取消',
cssClass:'cancel_btn',
action: function(result){
result.close();
}
}],
onhidden : function () {
if(url && flog){
window.location.href=url;
}
}
});
}
}

CSS代码如下：

/***弹窗样式开始*******/
.BootstrapDialog1{margin-top:15%;}
.BootstrapDialog1 .modal-dialog .modal-content{border-radius:0px;font-family:微软雅黑;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-header{background-color:#E8E8E8;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-body{line-height:150px;text-align:center;font-size:15px;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-body img{margin-right:80px;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-body span{font-size:20px;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-footer {border-top:1px dashed #e5e5e5}
.BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons{text-align:right;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .btn{padding:8px 40px;background-color:#EC6C00;border-radius:0px;color:#FFFFFF;border:1px solid #EC6C00;}
.BootstrapDialog1 .modal-dialog .modal-content .modal-footer .bootstrap-dialog-footer .bootstrap-dialog-footer-buttons .cancel_btn{color:#666666;background-color:#FFFFFF;border:1px solid #CCCCCC;}

/***弹窗样式结束*******/

bootstrap dialog 自动关闭

var dlg = BootstrapDialog.show({
    message: 'Hi Apple!'
});
setTimeout(function(){
    dlg.close();
},1000);

扩展：

https://stackoverflow.com/questions/tagged/twitter-bootstrap

https://www.w3schools.com/bootstrap/default.asp

http://www.jqueryscript.net/demo/jQuery-Modal-Dialog-Plugin-For-Bootstrap-3-Bootstrap-3-Dialog/examples/

https://nakupanda.github.io/bootstrap3-dialog/