平台用的全部都是BootStrapDialog的弹窗,然后美工设计了一个统一的样式,每次写的时候,都要对其进行样式重写;写吐了快,所以对BootStrap.底层做了修改;
也就是说,只要你要写的界面包含了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 确定按钮,空白处,关闭按钮等;
至于其他的,比如不能点击空白处关闭弹窗等特殊的需求,就需要自己写了~
说到底,就是不想写那么多冗余的代码,一套样式哪儿都是。。而且每次都要写,太麻烦。。。
已提交SVN更新即可使用,当然肯定有更多的扩展空间的,欢迎继续优化~~~
底层代码:
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;
}
}
});
}
}
/***弹窗样式开始*******/
.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;}
/***弹窗样式结束*******/