• 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;}
    
    /***弹窗样式结束*******/




    努力奋斗人的运气不会差~更多文章请点击:PHP笔记网
  • 相关阅读:
    QML键盘响应
    C++获取迭代器的下标
    C++虚函数指针
    QVariant转指针或其他非内建数据
    Signal QQmlEngine::quit() emitted, but no receivers connected to handle it quit
    旧服务器上源代码迁移到新服务器
    SQL Server 动态行转列(参数化表名、分组列、行转列字段、字段值)
    Rdlc报表出现空白页解决方法
    我所经历的企业中IT部门在企业内部的地位
    Config程序配置文件操作实践进阶之ConfigurationSectionGroup
  • 原文地址:https://www.cnblogs.com/yuanpengchao/p/5773892.html
Copyright © 2020-2023  润新知