一款基於jQuery的漂亮彈出層

標籤：取消   彈出層   open   cti   log   dash   click   comm   .com   

特別提示：本人部落格部分有參考網路其他部落格，但均是本人親手編寫過並驗證通過。如發現部落格有錯誤，請及時提出以免誤導其他人，謝謝！歡迎轉載，但記得標明文章出處：http://www.cnblogs.com/mao2080/1、效果樣本

2、代碼樣式

  1 /*  2 * 基於jquery iziModal彈出窗外掛程式  3 * by [email protected]  4 */  5 $(function (){  6     dialog = {  7         title : "提示資訊",  8         /**  9          * 提示訊息 10           * @param {Object} msg 訊息內容 11           * @param {Object} callBack 關閉回呼函數 12          * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}）） 13          */ 14         tips:function(args){ 15             if(!args.msg){ 16                 this.alert({msg:args, dialogId:"#dialog-tips", icon:"icon-tips"}); 17             }else{ 18                 this.alert($.extend(args, {dialogId:"#dialog-tips", icon:"icon-tips"})); 19             } 20         }, 21         /** 22          * 警告訊息 23           * @param {Object} msg 訊息內容 24           * @param {Object} callBack 關閉回呼函數 25          * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}） 26          */ 27         warn:function(args){ 28             if(!args.msg){ 29                 this.alert({msg:args, dialogId:"#dialog-warn", icon:"icon-warn"}); 30             }else{ 31                 this.alert($.extend(args, {dialogId:"#dialog-warn", icon:"icon-warn"})); 32             } 33         }, 34         /** 35          * 錯誤訊息 36           * @param {Object} msg 訊息內容 37           * @param {Object} callBack 關閉回呼函數 38          * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}） 39          */ 40         error:function(args){ 41             if(!args.msg){ 42                 this.alert({msg:args, dialogId:"#dialog-error", icon:"icon-error"}); 43             }else{ 44                 this.alert($.extend(args, {dialogId:"#dialog-error", icon:"icon-error"})); 45             } 46         }, 47         /** 48          * 構建彈出窗 49           * @param {Object} msg 訊息內容 50           * @param {Object} callBack 關閉回呼函數 51          * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}） 52          */ 53         alert:function(args){ 54             var dialog = $(args.dialogId); 55             dialog.iziModal({icon:args.icon, width:550, title:this.title, zindex:1003, onClosed:function(){ 56                 if(args.callBack){ 57                     args.callBack(); 58                 } 59             }}); 60             dialog.find(".dialog-content").html(args.msg); 61             dialog.iziModal(‘open‘); 62         }, 63         /** 64          * 構建確認框 65          * @param {Object} msg 訊息內容 66          * @param {Object} okBack 確定按鈕回呼函數 67          * @param {Object} noBack 取消按鈕回呼函數 68          */ 69         comfim:function(msg, okBack, noBack){ 70             var args = {dialogId:"#dialog-comfim", width:550, title:this.title, msg:msg, okBack:okBack, noBack:noBack, fullscreen:false, icon:"icon-comfim", zindex:1003}; 71             this.buildDialog(args); 72         }, 73         /** 74          * 構建模態視窗 75          * @param {Object} dialogId dialogId 76          * @param {Object} title 訊息標題 77          * @param {Object} msg 訊息內容 78          * @param {Object} okBack 確定按鈕回呼函數 79          * @param {Object} noBack 取消按鈕回呼函數 80          * @param {Object} fullscreen 是否可以全屏 81          * @param {Object} width 寬度 82          */ 83         dialog:function(dialogId, title, msg, okBack, noBack, fullscreen, width){ 84             var args = {dialogId:dialogId, width:width, title:title, msg:msg, okBack:okBack, noBack:noBack, fullscreen:fullscreen, icon:"icon-common", zindex:1002}; 85             this.buildDialog(args); 86         }, 87         /** 88          * 構建彈出層 89          * @param {Object} dialogId dialogId 90          * @param {Object} title 訊息標題 91          * @param {Object} msg 訊息內容 92          * @param {Object} okBack 確定按鈕回呼函數 93          * @param {Object} noBack 取消按鈕回呼函數 94          * @param {Object} fullscreen 是否可以全屏 95          * @param {Object} icon 表徵圖樣式 96          * @param {Object} args（參數格式：{json類型，具體參考上面參數}） 97          */ 98         buildDialog:function(args){ 99             var dialog = $(args.dialogId);100             var width = !args.width?dialog.width():args.width;101             dialog.iziModal({icon:args.icon, title:args.title, width:!width?1000:width, fullscreen:args.fullscreen, zindex:args.zindex});102             dialog.find(".iziModal-content .button-ok").off("click").bind("click", function(){103                 dialog.iziModal(‘close‘);104                 if(args.okBack){105                     window.setTimeout(function(){args.okBack();}, 10);106                 }107             });108             dialog.find(".iziModal-content .button-no").off("click").bind("click", function(){109                 dialog.iziModal(‘close‘);110                 if(args.noBack){111                     window.setTimeout(function(){args.noBack();}, 10);112                 }113             });114             dialog.find(".dialog-content").html(args.msg);115             dialog.iziModal(‘open‘);116         }117     };118 });

3、參考網站

外掛程式：http://izimodal.marcelodolce.com/

按鈕：http://demo.cssmoban.com/code/button/css3-button6/index.html

表徵圖：http://www.easyicon.net/1185695-sign_warning_icon.html

4、資料下載

dialog-demo.rar

一款基於jQuery的漂亮彈出層