BootstrapDialog.show函数底层简化

平台用的全部都是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;}

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

 

转载于:https://www.cnblogs.com/yuanpengchao/p/5773892.html