一款基於jQuery的漂亮彈出層

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

1、效果示例

2、代碼樣式

/*
* 基於jquery iziModal彈出窗插件
* by [e-mail]
*/
$(function (){
    dialog = {
        title : "提示信息",
        /**
         * 提示消息
          * @param {Object} msg 消息內容
          * @param {Object} callBack 關閉回調函數
         * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}））
         */
        tips:function(args){
            if(!args.msg){
                this.alert({msg:args, dialogId:"#dialog-tips", icon:"icon-tips"});
            }else{
                this.alert($.extend(args, {dialogId:"#dialog-tips", icon:"icon-tips"}));
            }
        },
        /**
         * 警告消息
          * @param {Object} msg 消息內容
          * @param {Object} callBack 關閉回調函數
         * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}）
         */
        warn:function(args){
            if(!args.msg){
                this.alert({msg:args, dialogId:"#dialog-warn", icon:"icon-warn"});
            }else{
                this.alert($.extend(args, {dialogId:"#dialog-warn", icon:"icon-warn"}));
            }
        },
        /**
         * 錯誤消息
          * @param {Object} msg 消息內容
          * @param {Object} callBack 關閉回調函數
         * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}）
         */
        error:function(args){
            if(!args.msg){
                this.alert({msg:args, dialogId:"#dialog-error", icon:"icon-error"});
            }else{
                this.alert($.extend(args, {dialogId:"#dialog-error", icon:"icon-error"}));
            }
        },
        /**
         * 構建彈出窗
          * @param {Object} msg 消息內容
          * @param {Object} callBack 關閉回調函數
         * @param {Object} args（參數格式：{msg或者json類型，具體參考上面參數}）
         */
        alert:function(args){
            var dialog = $(args.dialogId);
            dialog.iziModal({icon:args.icon, width:550, title:this.title, zindex:1003, onClosed:function(){
                if(args.callBack){
                    args.callBack();
                }
            }});
            dialog.find(".dialog-content").html(args.msg);
            dialog.iziModal('open');
　　　　　　　　　dialog.find(".button-silver").focus();
        },
        /**
         * 構建確認框
         * @param {Object} msg 消息內容
         * @param {Object} okBack 確定按鈕回調函數
         * @param {Object} noBack 取消按鈕回調函數
         */
        comfim:function(msg, okBack, noBack){
            var args = {dialogId:"#dialog-comfim", width:550, title:this.title, msg:msg, okBack:okBack, noBack:noBack, fullscreen:false, icon:"icon-comfim", zindex:1003};
            this.buildDialog(args);
        },
        /**
         * 構建模態窗口
         * @param {Object} dialogId dialogId
         * @param {Object} title 消息標題
         * @param {Object} msg 消息內容
         * @param {Object} okBack 確定按鈕回調函數
         * @param {Object} noBack 取消按鈕回調函數
         * @param {Object} fullscreen 是否可以全屏
         * @param {Object} width 寬度
         */
        dialog:function(dialogId, title, msg, okBack, noBack, fullscreen, width){
            var args = {dialogId:dialogId, width:width, title:title, msg:msg, okBack:okBack, noBack:noBack, fullscreen:fullscreen, icon:"icon-common", zindex:1002};
            this.buildDialog(args);
        },
        /**
         * 構建彈出層
         * @param {Object} dialogId dialogId
         * @param {Object} title 消息標題
         * @param {Object} msg 消息內容
         * @param {Object} okBack 確定按鈕回調函數
         * @param {Object} noBack 取消按鈕回調函數
         * @param {Object} fullscreen 是否可以全屏
         * @param {Object} icon 圖標樣式
         * @param {Object} args（參數格式：{json類型，具體參考上面參數}）
         */
        buildDialog:function(args){
            var dialog = $(args.dialogId);
            var width = !args.width?dialog.width():args.width;
            dialog.iziModal({icon:args.icon, title:args.title, width:!width?1000:width, fullscreen:args.fullscreen, zindex:args.zindex});
            dialog.find(".iziModal-content .button-ok").off("click").bind("click", function(){
                dialog.iziModal('close');
                if(args.okBack){
                    window.setTimeout(function(){args.okBack();}, 10);
                }
            });
            dialog.find(".iziModal-content .button-no").off("click").bind("click", function(){
                dialog.iziModal('close');
                if(args.noBack){
                    window.setTimeout(function(){args.noBack();}, 10);
                }
            });
            dialog.find(".dialog-content").html(args.msg);
            dialog.iziModal('open');
　　　　　　　　　 dialog.find(".button-silver").focus();
        }
    };
});

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