一款基于jQuery的漂亮弹出层

特别提示：本人博客部分有参考网络其他博客，但均是本人亲手编写过并验证通过。如发现博客有错误，请及时提出以免误导其他人，谢谢！欢迎转载，但记得标明文章出处：http://www.cnblogs.com/mao2080/

1、效果示例

2、代码样式

 /*
 * 基于jquery iziModal弹出窗插件
 * by mao2080@sina.com
 */
 $(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