Home » Guides Advanced Article

Lert: A multi-button alert/confirm

2.6/5.0 (157 votes total)

Jeffrey Sambells
August 21, 2006

Jeffrey Sambells
Jeffrey Sambells is a graphic designer and self taught web application developer best known for his unique ability to merge the visual world of graphics with the mental realm of code.

Jeffrey Sambells has written 1 articles for JavaScriptSearch.
View all articles by Jeffrey Sambells...

Lert: A multi-button alert/confirm

The other day a co-worker was asking if it was possible to add additional buttons to the JavaScript confirm box. As far as I knew it wasn’t possible, but there was another option, and probably one that’s a lot cooler and more useful: make our own alert/confirm box. I planned it all out in my head the next morning while cutting greens at the golf course, and hacked a working version together while I was eating my dinner later that day.

Click here to see Lert: the example!

Lert() is a quick JavaScript object I put togeather to replace the alert and confirm box built into JavaScript.

The quick features list is:

  1. Floating 'window' with darkened background a la lightbox.js.
  2. Specifying a defaultButton will execute that button event when the 'enter/return' key is pressed.
  3. Styled using CSS so you can edit it as necessary.
  4. Asynchronous event triggering similar to an AJAX call. Events are specified using anonymous functions passed into the LertButton() object and triggered when then associated button is clicked.

Sample Implementation:

<link href="lert.css" rel="stylesheet" type="text/css"/>
<script src="lert.js" type="text/javascript"></script>

<script type="text/javascript">
function example() {

	var yes = new LertButton('Close Window', function() {
		//do nothing

	var maybe = new LertButton('Cool!', function() {
		alert('Thanks. It\'s better than this window!');

	var no = new LertButton('Download Source', function() {
		window.location.href = 'lert-1.0.tar.gz';

	var message = "This is an example of the Lert() box. The message can be a string or <i>HTML</i>!";
	var exampleLert = new Lert(




API Version 1.0

Lert(message, buttons, options)

message - string: the message to display, can be HTML.
buttons - array: the LertButtons instances for each button.
options - object: see LertOptions.


display() - triggers the Lert box to show on the screen.

LertButton(label, event, options)

label - string: Text to show in the button.
event - function: function to execute when the button is clicked.
options - object: see LertButtonOptions.


none as of now


defaultButton - object: The LertButtons object that is the default button (can be triggered by pressing enter/return on the keyboard)
icon - string: the path to an icon to display next to the message.

Add commentAdd comment (Comments: 1)  
Title: Thanks for the code! April 16, 2007
Comment by David Johnson


The code works very well and I am pleased. One thing though, on Firefox I can't seem to get the enter key to activate the default action, although it works perfectly on IE. Any suggestions?




Related Resources

Other Resources