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:
- Floating 'window' with darkened background a la lightbox.js.
- Specifying a defaultButton will execute that button event when the 'enter/return' key is pressed.
- Styled using CSS so you can edit it as necessary.
- 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.
FEEDBACK
COMMENTS
PRINT
SUBMIT ARTICLE
RSS