BootstrapDialog.show函數底層簡化

平臺用的所有都是BootStrapDialog的彈窗，而後美工設計了一個統一的樣式，每次寫的時候，都要對其進行樣式重寫；寫吐了快，因此對BootStrap.底層作了修改；

也就是說，只要你要寫的界面包含了bootstrap就能夠使用這個標準的彈窗；

調用方法很是簡單；

0、彈窗底層 參數介紹 一、title 彈窗標題 二、html 彈窗內容（能夠夾帶左側的一個圖標自動對齊） 三、url 彈窗關閉後的跳轉地址 四、callback function 點擊肯定後的執行函數 五、flog 是否強制跳轉路徑 ***/ 一、基本的樂學一百標準彈窗： BootstrapDialog1.Init('提示','你好');
 
當不傳遞迴調函數，與url地址時，肯定按鈕與取消按鈕點擊都是關閉彈窗；
  
二、帶有url跳轉的彈窗：
BootstrapDialog1.Init('提示','你好','mk.php?do=article_new&nav_id=-100');
url能夠是任意地址，不侷限與樂學地址；點擊肯定後跳轉；

三、帶有回調函數的彈窗：
舉個例子：
<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能夠不傳遞，那麼上邊的執行結果就是，不跳轉，執行函數；能夠在函數中作任何事情；
四、強制跳轉；
有些彈窗關閉時必需要跳轉至某個路徑，那麼就會用到最後一個參數
標題，內容與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;}

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