Three functions to replace the native javascript alert(), confirm() & prompt() popup boxes with customizable jQuery UI dialog boxes. example usage: uiPrompt({ message: 'Enter your name', placeholder: 'Your Name Goes Here', callback: function(value){ uiAlert("hello "+value); }});

jQuery-UI-javascript-prompts.js

/**
 * display a styled jQuery UI dialog box in place of the native javascript alert()
 *
 * message    string	HTML message to display
 * title	string	optional title text to display in header of confirmation box
 * callback	function optional function to trigger when user clicks "OK"
 *
 */
function uiAlert(settings)
{
	if(typeof(settings) == "string")
	{
		settings = { message: settings };	
	}
	var settings = $.extend( {
		'message'	: '',	
		'title'	: '',	 
		'width'	: '450px',	
		'height': 'auto',
		'modal'	: true,
		'id'	: 'uiAlert',
		'resizable' : false,
		'css'	:	{ 'text-align':'left' },
		'callback'	: function(){ return true; }
	}, settings);
	$('body').append('<div id="'+ settings.id +'" title="'+ settings.title +'">'+ settings.message +'</div>');
	$(function() {
		$( "#"+settings.id ).dialog({
			modal: settings.modal,
			resizable: settings.resizable,
			width: settings.width,
			height: settings.height,		
			close: function(){ $(this).remove() },
			buttons: {
				OK: function() {
					$( this ).dialog("close");
					var callback = settings.callback;
					callback();
				}
			}
		}).css(settings.css);
	});	
}


/**
 * display a styled jQuery UI dialog box in place of the native javascript confirm() 
 * 
 * message	string		HTML message to display
 * title	string		optional title text to display in header of confirmation box
 * callback function	required function to handle user's response
 *
 */
function uiConfirm(settings)
{
	if(typeof(settings) == "string")
	{
		settings = { message: settings };	
	}
	var settings = $.extend( {
		'message'	: '',	
		'title'	: '',	 
		'width'	: '450px',	
		'height': 'auto',
		'modal'	: true,
		'id'	: 'uiConfirm',
		'resizable' : false,
		'css'	:	{ 'text-align':'left' },
		'callback'	: function(bool){ return bool; }
	}, settings);
	$('body').append('<div id="'+ settings.id +'" title="'+ settings.title +'">'+ settings.message +'</div>');
	$(function() {
		$( "#"+settings.id ).dialog({
			modal: settings.modal,
			resizable: settings.resizable,
			width: settings.width,
			height: settings.height,		
			close: function(){ 
						$(this).remove(); 
					},
			buttons: 
			{
				Cancel: function(){ 
							$( this ).dialog('close');
							var callback = settings.callback;
							callback(false); 
						},
				Ok:		function(){ 
							$( this ).dialog('close');
							var callback = settings.callback;
							callback(true); 
						}
			}
		}).css(settings.css);
	});
}

function uiPrompt(settings)
{
	var settings = $.extend( {
		'message'	: '',	
		'title'	: '',
		'placeholder' : '', // HTML5 placeholder text for the input field	 
		'input'	: 'text',
		'width'	: '450px',	
		'height': 'auto',
		'modal'	: true,
		'id'	: 'uiPrompt',
		'resizable' : false,
		'css'	:	{ 'text-align':'left' },
		'callback'	: function(value){ return value; }
	}, settings);
	$('body').append('<div id="'+ settings.id +'" title="'+ settings.title +'">'+ settings.message +'<br><br><input type="'+ settings.input +'" placeholder="'+ settings.placeholder +'"></div>');
	$(function() {
		$( "#"+settings.id ).dialog({
			modal: settings.modal,
			resizable: settings.resizable,
			width: settings.width,
			height: settings.height,		
			close: function(){ 
						$(this).remove(); 
					},
			buttons: 
			{
				Cancel: function(){ 
							$( this ).dialog('close');
						},
				Ok:		function(){ 
							$( this ).dialog('close');
							var callback = settings.callback;
							callback( $('input', this).val()); 
						}
			}
		}).css(settings.css);
	});
}