jquery Custom dialog alert, confirm, and prompt

jquery Alert Dialogs, another jquery-based cue box plugin that includes three types of alert, Confirm, prompt, and a high-level example that allows you to embed an HTML language in a hint box to customize your style. jquery's Cue box plugin has many kinds, each is from the different high-skilled hand, therefore all has its own characteristic, including the style and the use method and so on.
Effect Experience: http://keleyi.com/keleyi/phtml/jqplug/

English version: http://keleyi.com/keleyi/phtml/jqplug/1.htm


The purpose of this jquery plugin is to replace JavaScript's standard function alert (), confirm (), and prompt (). This plugin has the following features:

1: This plugin allows you to support your own CSS development. Make your site look more professional.

2: Allows you to customize the caption of the dialog box.

3: In IE7, you can avoid using JavaScript's prompt () function to bring up the page reload.

4: These methods all emulate the Windows modal dialog box. When you change the browser window when you're older, it adapts to the user

The adjustment of the window.

5: If you introduce the jquery UI draggable plugin plugin, the plugin can also be dragged freely.


Jquery.alerts.js Code:

jquery Alert Dialogs, another jquery-based cue box plugin that includes the three types of alert, Confirm, prompt, and a high-level example that allows you to embed HTML language in a hint box and customize style styles. jquery's Cue box plugin has many kinds, each is from the different high-skilled hand, therefore all has its own characteristic, including the style and the use method and so on.
Effect Experience: http://keleyi.com/keleyi/phtml/jqplug/

English: http://keleyi.com/keleyi/phtml/jqplug/1.htm

The purpose of the
jquery plugin is to replace the JavaScript standard function alert (), confirm (), and prompt (). This plugin has the following features:

1: This plugin allows you to support your own CSS development. Make your site look more professional.

2: Allows you to customize the caption of the dialog box.

3: In IE7, you can avoid page reloading using JavaScript's prompt () function.

4: These methods both emulate the Windows modal dialog box. It adapts to the user's

window when you change the browser window when you're older.

5: If you introduce the jquery UI draggable plugin plugin, the plugin can also be dragged freely.


Jquery.alerts.js code:

//Download by http://keleyi.com//modified by Collayi to make plugins suitable for new versions of jquery (e.g. 1.10.1)/Visit http ://keleyi.com/a/bjac/no0m3cb1.htm for more information////usage://jalert (message, [title, Callback])//Jconfir m (Message, [title, Callback])//jprompt (message, [value, title, callback])///history:////1.00-released ( December)//2013-7-8 (function ($) {$.alerts = {//These properties can be read/written by accessing $.alerts.proper Tyname from your scripts to any timeverticaloffset: -75,//Vertical offset of the dialog from center screens, in Pixelshor  izontaloffset:0,//Horizontal offset of the dialog from center screens, in Pixels/repositiononresize:true,//Re-centers The dialog on Window resizeoverlayopacity:. $,//transparency level of Overlayoverlaycolor: ' #FFF ',//base color of ov Erlaydraggable:true,//Make the Dialogs draggable (requires UI draggables plugin) OKButton: ' &nbsp;Ok&nbsp;',//text for the OK Buttoncancelbutton: '&nbsp;Cancel&nbsp;',//text for the Cancel buttondialogclass:null,//if specified, this class would be applied to all dialogs//public Methodsalert:function (message, title, callback) {if (title = = null) title = ' Alert '; $.alerts._show (title, message, NULL , ' Alert ', function (result) {if (callback) callback (result);});},confirm:function (message, title, callback) {if (title = = null) title = ' Confirm '; $.alerts._show (title, message, NULL, ' Confirm ', function (result) {if (callback) callback (Resul t);});},prompt:function (message, value, title, callback) {if (title = = null) title = ' Prompt '; $.alerts._show (title, mess Age, value, ' Prompt ', function (result) {if (callback) callback (result);});},//Private methods_show:function (title, MSG , value, type, callback) {$.alerts._hide (); $.alerts._overlay (' Show '); $ ("BODY"). Append ('<DivID= "Popup_container">' + '<H1ID= "Popup_title"></H1>' + '<DivID= "Popup_content">' + '<DivID= "Popup_message"></Div>' + '</Div>' + '</Div>if ($.alerts.dialogclass) $ ("#popup_container"). addclass ($.alerts.dialogclass);//IE6 Fixvar pos = (' undefined ' = = typeof (Document.body.style.maxHeight))? ' Absolute ': ' fixed '; $ ("#popup_container"). css ({position:pos,zindex:99999,padding:0,margin:0}); $ ("#popup_title") . text (title); $ ("#popup_content"). addclass (type); $ ("#popup_message"). Text (msg); $ ("#popup_message"). HTML ($ ("# Popup_message "). Text (). replace (/\n/g, '<BR/>')); $ ("#popup_container"). CSS ({minWidth: $ ("#popup_container"). Outerwidth (), MaxWidth: $ ("#popup_container"). Outerwidth ()}); $.alerts._reposition (); $.alerts._maintainposition (true); switch (type) {case ' alert ': $ ("#popup_ Message "). After ('<DivID= "Popup_panel"><inputtype= "button"value= "' + $.alerts.okbutton + '"ID= "POPUP_OK" /></Div>'); $ ("#popup_ok"). Click (function () {$.alerts._hide (); callback (true);}); $ ("#popup_ok"). focus (). KeyPress (function (e) {if (E.keycode = = | | | e.keycode =) $ ("#popup_ok"). Trigger (' click ');}) ; Break;case ' confirm ': $ ("#popup_message"). After ('<DivID= "Popup_panel"><inputtype= "button"value= "' + $.alerts.okbutton + '"ID= "POPUP_OK" /> <inputtype= "button"value= "' + $.alerts.cancelbutton + '"ID= "Popup_cancel" /></Div>'); $ ("#popup_ok"). Click (function () {$.alerts._hide (); if (callback) callback (TRUE);}); $ ("#popup_cancel"). Click (function () {$.alerts._hide (); if (callback) callback (FALSE);}); $ ("#popup_ok"). focus (); $ ("#popup_ok, #popup_cancel"). KeyPress (function (e) {if (E.keycode = =) $ ("#popup_ok"). Trigger (' click '), if (E.keycode = =) $ ("#popup_cancel"). Trigger (' click ');}); Break;case ' Prompt ': $ ("#popup_message"). Append ('<BR/><inputtype= "text"size= "+"ID= "Popup_prompt" />'). After ('<DivID= "Popup_panel"><inputtype= "button"value= "' + $.alerts.okbutton + '"ID= "POPUP_OK" /> <inputtype= "button"value= "' + $.alerts.cancelbutton + '"ID= "Popup_cancel" /></Div><DivID= "Popup_overlay"></Div>'); $ ("#popup_overlay"). CSS ({position: ' absolute ', zindex:99998,top: ' 0px ', left: ' 0px ', Width: ' 100% ', Height: $ ( Document). Height (), background: $.alerts.overlaycolor,opacity: $.alerts.overlayopacity}); Break;case ' Hide ': $ ("# Popup_overlay "). Remove (); Break;}},_reposition:function () {var top = (($ (window). Height ()/2)-($ (" #popup_container ")  . Outerheight ()/2) + $.alerts.verticaloffset;var left = (($ (window). Width ()/2)-($ ("#popup_container"). Outerwidth ()/ 2) + $.alerts.horizontaloffset;if (top<0) Top= 0;if (left < 0) left= 0;//IE6 fixif (' undefined '== typeof (Document.body.style.maxHeight)) Top= Top+ $ (window). scrolltop (); $ ("#popup_container"). CSS ({top:top + ' px ', left:left + ' px '}), $ ("#popup_overlay"). Height (document). Height ());},_maintainposition:function (status) {if ($.alerts.repositiononresize) {switch (status) { Case true:$ (window). Bind (' Resize ', function () {$.alerts._reposition ();}); Break;case false:$ (window). Unbind (' resize '); break;}}} Shortuct Functionsjalert= function (message,title, callback) {$.alerts.alert (message, title, callback);} Jconfirm= function (message,title, callback) {$.alerts.confirm (message, title, callback);}; Jprompt= function (message,value, title, callback) {$.alerts.prompt (message, value, title, callback);};}) (jQuery);

CSS Code:

#popup_container{font-family:Arial, Sans-serif;font-size:12px;Min-width:300px;/*Dialog'll be is no smaller than this*/Max-width:600px;/*Dialog would wrap after the this width*/background:#FFF;Border:Solid 5px #999;Color:#000;-moz-border-radius:5px;-webkit-border-radius:5px;Border-radius:5px;}/*http://keleyi.com Collayi*/#popup_title{font-size:14px;Font-weight:Bold;text-align:Center;Line-height:1.75em;Color:#666;background:#CCC URL (images/title.gif) top Repeat-x;Border:Solid 1px #FFF;Border-bottom:Solid 1px #999;cursor:default;padding:0em;margin:0em;}#popup_content{background:16px 16px no-repeat url (http://keleyi.com/keleyi/phtml/jqplug/index/info.gif);padding:1em 1.75em;margin:0em;}#popup_content. Alert{Background-image:URL (http://keleyi.com/keleyi/phtml/jqplug/index/info.gif);}#popup_content. Confirm{Background-image:URL (http://keleyi.com/keleyi/phtml/jqplug/index/important.gif);}#popup_content. Prompt{Background-image:URL (http://keleyi.com/keleyi/phtml/jqplug/index/help.gif);}#popup_message{Padding-left:48px;}#popup_panel{text-align:Center;margin:1em 0em 0em 1em;}#popup_prompt{margin:. 5em 0em;}

Also need to quote:
<script type= "Text/javascript" src= "Http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" ></script>
<script src= "Http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type= "text/ JavaScript "></script>

For more information, please visit: http://keleyi.com/a/bjac/no0m3cb1.htm

jquery Custom dialog alert, confirm, and prompt