The jQuery UI Dialog plugin is a nice way of popping up a message on a page without using the Javascript alert() function.
The are lots of different ways and options you can use to actually display the dialog and control it's behavior. But the most basic method that I generally use (adapted from here) looks like this:
function dlg(msg, title) { var $dialog = $('').html(msg).dialog({ title: title});}
Just call the function above with some text and a title and you'll get a popup that looks just like this (assuming you're using the ui-lightness theme):
Here's a complete example where clicking on a link popups up the dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <link rel="stylesheet" href="/mbiek/dlg/ui-lightness/jquery-ui.css" type="text/css" media="all" /> </head> <body> <a href="#">Click Me!</a> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <script type="text/javascript"> function dlg(msg, title) { var $dialog = $('<div></div>').html(msg).dialog({ title: title}); } $(document).ready( function() { $('a').click( function(event) { dlg('This is a dialog.', 'Yay'); }); }); </script> </body></html>