平台用的全部都是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; } } }); } }
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;} /***弹窗样式结束*******/