A beautiful pop-up layer based on jquery

Special Note: I blog part of the reference network other blogs, but I have personally written and verified through. If you find that the blog has errors, please prompt to avoid misleading other people, thank you! Welcome reprint, but remember to indicate the source of the article: HTTP://WWW.CNBLOGS.COM/MAO2080/1, effect example

2. Code Style

1 /*2 * Based on jquery izimodal pop-up windows plugin3 * by [email protected]4 */5$(function (){6Dialog = {7Title: "Prompt Message",8         /**9 * Prompt MessageTen * @param {Object} msg message Content One * @param {Object} callBack close callback function A * @param {Object} args (parameter format: {msg or JSON type, refer to above parameter})) -          */ -Tipsfunction(args) { the             if(!args.msg) { -                  This. alert ({Msg:args, dialogID: "#dialog-tips", Icon: "Icon-tips"}); -}Else{ -                  This. Alert ($.extend (args, {dialogid: "#dialog-tips", Icon: "Icon-tips"})); +             } -         }, +         /** A * Warning Message at * @param {Object} msg message Content - * @param {Object} callBack close callback function - * @param {Object} args (parameter format: {msg or JSON type, refer to above parameter}) -          */ -Warnfunction(args) { -             if(!args.msg) { in                  This. alert ({Msg:args, dialogID: "#dialog-warn", Icon: "Icon-warn"}); -}Else{ to                  This. Alert ($.extend (args, {dialogid: "#dialog-warn", Icon: "Icon-warn"})); +             } -         }, the         /** * * error message $ * @param {Object} msg message ContentPanax Notoginseng * @param {Object} callBack close callback function - * @param {Object} args (parameter format: {msg or JSON type, refer to above parameter}) the          */ +Errorfunction(args) { A             if(!args.msg) { the                  This. alert ({Msg:args, dialogID: "#dialog-error", Icon: "Icon-error"}); +}Else{ -                  This. Alert ($.extend (args, {dialogid: "#dialog-error", Icon: "Icon-error"})); $             } $         }, -         /** - * Build Popup window the * @param {Object} msg message Content - * @param {Object} callBack close callback functionWuyi * @param {Object} args (parameter format: {msg or JSON type, refer to above parameter}) the          */ -Alertfunction(args) { Wu             varDialog =$ (args.dialogid); -Dialog.izimodal ({icon:args.icon, width:550, title: This. title, zindex:1003, onclosed:function(){ About                 if(args.callback) { $ Args.callback (); -                 } -             }}); -Dialog.find (". Dialog-content"). HTML (args.msg); ADialog.izimodal (' Open '); +         }, the         /** - * Build Confirmation Box $ * @param {Object} msg message Content the * @param {Object} okback OK button callback function the * @param {Object} noback Cancel button callback function the          */ theComfim:function(msg, Okback, noback) { -             varargs = {dialogid: "#dialog-comfim", width:550, Title: This. title, Msg:msg, Okback:okback, Noback:noback, fullscreen:false, Icon: "Icon-comfim", zindex:1003}; in              This. Builddialog (args); the         }, the         /** About * Building Modal windows the * @param {Object} dialogid dialogid the * @param {Object} title message header the * @param {Object} msg message Content + * @param {Object} okback OK button callback function - * @param {Object} noback Cancel button callback function the * @param {Object} fullscreen can be fullscreenBayi * @param {Object} width the          */ theDialogfunction(dialogID, title, MSG, Okback, Noback, fullscreen, width) { -             varargs = {Dialogid:dialogid, width:width, Title:title, Msg:msg, Okback:okback, Noback:noback, Fullscreen:fullscreen, icon : "Icon-common", zindex:1002}; -              This. Builddialog (args); the         }, the         /** the * Build pop-up layer the * @param {Object} dialogid dialogid - * @param {Object} title message header the * @param {Object} msg message Content the * @param {Object} okback OK button callback function the * @param {Object} noback Cancel button callback function94 * @param {Object} fullscreen can be fullscreen the * @param {Object} icon style the * @param {Object} args (parameter format: {JSON type, reference above parameter}) the          */98Builddialog:function(args) { About             varDialog =$ (args.dialogid); -             varwidth =!args.width?dialog.width (): args.width;101Dialog.izimodal ({icon:args.icon, title:args.title, width:!width?1000: Width, fullscreen:args.fullscreen, zindex:args.zindex});102Dialog.find (". Izimodal-content. Button-ok"). Off ("click"). Bind ("click",function(){103Dialog.izimodal (' Close ');104                 if(args.okback) { theWindow.settimeout (function() {args.okback ();}, 10);106                 }107             });108Dialog.find (". Izimodal-content. Button-no"). Off ("click"). Bind ("click",function(){109Dialog.izimodal (' Close '); the                 if(args.noback) {111Window.settimeout (function() {args.noback ();}, 10); the                 }113             }); theDialog.find (". Dialog-content"). HTML (args.msg); theDialog.izimodal (' Open '); the         }117     };118});

3. Reference website

Plugin: http://izimodal.marcelodolce.com/

Button: http://demo.cssmoban.com/code/button/css3-button6/index.html

Icon: http://www.easyicon.net/1185695-sign_warning_icon.html

4. Download Information

Dialog-demo.rar

A beautiful pop-up layer based on jquery