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;}

/***彈窗樣式結束*******/