JALERT - A JQUERY UI ALERT / CONFIRM REPLACEMENT

A themeroller ready replacement for the standard Alert and Confirm dialog boxes.

The Motivation

The standard dialog boxes are notoriously user unfriendly.  They left developers unable to tweak their functionaly, and designers unable to tweak their design.  When all is said and done, they are pretty crude devices.

By having a jQuery UI plugin, you leverage the themability of the UI framework.  And, by making it configurable, more control is provided than just the message displayed to the user.

The Foundation

At its core, jAlert is a jQuery UI dialog plugin, set-up to specifically mimic [and improve upon] the standard dialog boxes.  Also, while many of the options for the underlying UI dialog are pre-set, all of the UI dialog options may be overriden by the optional 'options' parameter.

Usage
$.jAlert([message], [highlight level], function() {
	//callback
}, [options]);
	
	
$.jConfirm([message], [highlight-level], function(result) {
	//callback - result is either 'true' of 'false'
}, [options]);

 

  • [message] : The message displayed to the user
  • [highlight level] : The 'highlight level' of the dialog [values: 'highlight', 'error', '']
  • [options] : optional parameter - additional options for the underlying UI dialog window

View Demo

jAlert - a jQuery UI Alert / Confirm Replacement
2.04.2011 ~ 11:26 AM
posted in professional
tagged in jquery : jquery-ui : plugin
comments [14]

 
 
 
 
@ Alex Rad
Great plugin. However, there is a problem (or I am not using it correctly) with $.jConfirm. Unlike javascript "confirm" it does not wait for the user confirmation: function myfunction (param) { $.jConfirm('Are you sure?', 'highlight', function(result) { return (result); }, { show: '' }); alert ('I should not see this but I do!'); } How can I make it wait for the user's conformation?
6.18.2011 - 08:40 AM
 
 
@ dochoffiday
There's nothing you can do in javascript to block execution like the native "alert" and "confirm" functions do. That's why there's callbacks - put the code in the callback instead of after invoking the plugin: function myfunction(param) { $.jConfirm('Are you sure?', 'highlight', function (result) { alert('I should not see this and I DONT (until the user clicks a button)'); return (result); }, { show: '' }); alert('I should not see this but I do!'); }
7.05.2011 - 07:34 PM
 
 
@ Thomas
Hello, I had to make the following change in my case to make the titlebar of the dialogboxes disappear. On line 43, change dialogClass: options.wrapperClass + dialogCSS, to dialogClass: options.wrapperClass + ' ' +dialogCSS, That's it :) Otherwise it produced a messed up classname that caused the issue with the titlebar.
5.29.2012 - 09:48 PM
 
 
@ Herb
Thank god for these enabled comments. I would have wasted so much time thinking there is an actual real replacement to "alert" and "confirm".
8.11.2012 - 04:54 PM
 
 
@ anon
@dochoffiday: It doesn't solve this though: $('form').bind('submit', function() { var me = this; $.jConfirm('¿Estás seguro?', 'highlight', function(answer) { if (answer) { $(me).submit(); } }); return false; // Will always be executed }); Unless I'm not seeing something...
12.14.2012 - 01:41 PM
 
 
@ anon
I was: event.preventDefault() must be used.
12.14.2012 - 01:42 PM
 
 
@ tony
Where can i get a full list of the options list?
2.06.2013 - 09:49 AM
 
 
@ Mitch
Where do I download this?
6.06.2013 - 10:30 AM
 
 
@ dochoffiday
@Mitch - sorry, I should have put a link to these resources. http://demo.dochoffiday.com/jquery-ui-jalert/jquery.ui-jalert.css http://demo.dochoffiday.com/jquery-ui-jalert/jquery.ui-jalert.js
6.11.2013 - 09:25 PM
 
 
@ Lee
Do you happen to provide security update notices for jAlert updates?
10.29.2013 - 01:54 PM
 
 
@ nagi
please how to implement this function send me reply my mail sir
1.18.2014 - 01:40 PM
 
 
@ Dev
What about the images? Where are they?
1.30.2014 - 10:28 AM
 
 
@ Cao Thanh Liêm
Send me link download Plase :D Thanks you so much
9.19.2014 - 05:43 AM
 
 
@ dochoffiday
@Cao - sorry, I forgot the download links changed: http://dochoffiday.com/_demo/jquery-ui-jalert/jquery.ui-jalert.css http://dochoffiday.com/_demo/jquery-ui-jalert/jquery.ui-jalert.js
9.23.2014 - 06:58 PM
 
 

SPEAK!

Please enter your comment below.