Wednesday, May 31, 2017

Use Bootbox.js to show Dialog html

 var Dialog = {  
   Success: 'Thành công',  
   Warning: 'Cảnh báo',  
   Error: 'Lỗi',  
   CONFIRM: 'primary',  
   /* Description: Dialog thông báo  
            - message: Thông tin thông báo cần hiển thị.  
            - status: Trạng thái dialog (Success: Thành công, Warning: Cảnh báo, Error: Thất bại).  
            - callbackFuntion: Function Callback thực hiện sau khi ấn nút xác nhận form thông báo. */  
   Alert: function (message, status, dialogtitle, callbackFuntion, hideModalFuntion) {  
     var typeDialog = this._getTypeDialog(status);  
     bootbox.dialog({  
       message: message,  
       title: dialogtitle != 'undefine' ? dialogtitle : typeDialog.title,  
       closeButton: false,  
       className: typeDialog.className,  
       buttons: {  
         success: {  
           label: "<i class='fa fa-check'></i>" + language.Btn_Close,  
           className: typeDialog.buttonClass,  
           callback: callbackFuntion  
         }  
       }  
     }).on('shown.bs.modal', function () {  
       $('.bootbox').find('button:first').focus();  
     }).on('hidden.bs.modal', function () {  
       var p = $("body").css('padding-right');  
       var p1 = parseInt(p) - 17;  
       if (p1 >= 0)  
         $("body").css('padding-right', p1);  
       hideModalFuntion == undefined ? function () { } : hideModalFuntion();  
     });  
   },  
   /* Description: Dialog Config custom  
           - message: Thông tin thông báo cần hiển thị.  
           - callbackFuntion: Function Callback thực hiện sau khi ấn nút xác nhận form thông báo. */  
   ConfirmCustom: function (title, message, callbackFuntion, showModalFuntion) {  
     var typeDialog = this._getTypeDialog(this.CONFIRM);  
     bootbox.dialog({  
       message: message,  
       title: title ? title : typeDialog.title,// title ? typeDialog.title : title,  
       closeButton: false,  
       className: typeDialog.className,  
       buttons: {  
         success: {  
           label: "<i class='fa fa-check'></i>" + language.Btn_Confirm,  
           className: typeDialog.buttonClass,  
           callback: callbackFuntion  
         },  
         cancel: {  
           label: "<i class='fa fa-reply'></i>" + language.Btn_Close,  
           className: "btn btn-df"  
         }  
       }  
     }).on('shown.bs.modal', showModalFuntion == undefined ? function () {  
       //$('.bootbox').find('button:first').focus();  
     } : showModalFuntion);  
   },  
   /* Description: Hàm xác định kiểu của Dialog */  
   _getTypeDialog: function (status) {  
     var type = {};  
     switch (status) {  
       case 'success':  
         type = {  
           title: language.TitlePopupSuccess,  
           className: 'my-modal-success',  
           buttonClass: 'btn-sm btn-lue'  
         };  
         break;  
       case 'warning':  
         type = {  
           title: Status_Confirm,  
           className: 'my-modal-warning',  
           buttonClass: 'btn-sm btn-blue'  
         };  
         break;  
       case 'error':  
         type = {  
           title: language.TitlePopupError,  
           className: 'my-modal-error',  
           buttonClass: 'btn-sm btn-blue'  
         };  
         break;  
       case 'primary':  
         type = {  
           title: language.TitlePopupPrimary,  
           className: 'my-modal-primary',  
           buttonClass: 'btn-sm btn-blue'  
         };  
         break;  
     }  
     return type;  
   }  
 }  

No comments:
Write comments