JavaScript Guides Advanced


  

Lert: A multi-button alert/confirm

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.

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(  		message,  		[no,maybe,yes],  		{  			
defaultButton:yes,  			icon:'i/dialog-information.png'  		});    	
exampleLert.display();    }    </script>

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.

Methods

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.

LertButtonOptions

none as of now

LertOptions

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.




—
JavaScripts Guides: Beginner, Advanced
JavaScripts Tutorials: Beginner, Advanced



[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Guides Advanced -
Lert A multi-button alert-confirm