Override alert() With jQuery UI Dialog
This is a quick trick I wanted to share.
Have you ever wanted to customize the appearance of alerts to fit the theme of your website? If you're using jQuery UI, it's almost stupid how easy it is.
Check it out:
Just add this to the top of your javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 | window.alert = function(message){ $(document.createElement('div')) .attr({title: 'Alert', 'class': 'alert'}) .html(message) .dialog({ buttons: {OK: function(){$(this).dialog('close');}}, close: function(){$(this).remove();}, draggable: true, modal: true, resizable: false, width: 'auto' }); }; |
And add a little bit of CSS to make it look nicer
1 2 3 4 5 6 7 8 9 | .alert { font-size: 1.3em; padding: 1em; text-align: center; white-space: nowrap; width: auto; word-wrap: normal; } |
Usage
Now, calling:
1 | alert('This is a test of the <strong>new</strong> alert!'); |
Gives you:
(With the jQuery UI Smoothness theme)
Notice, you can use HTML in your alerts now.
Caveats
Since the old alert was an actual modal window, and this new one is simply mimicking it from inside the main document, there are a few differences in behavior that are worth noting.
- The new alert will not raise a window event like the old alert did. If your window is not in focus, the user will have no idea anything has happened.
- The new alert does not block javascript execution like the old alert did. With the old alert, as soon as it's triggered, all javascript stops and waits for the user to close the alert box.
- Because the new alert is non-blocking, you can have multiple alerts open at the same time. In the case of multiple alerts, the user will see them in reverse chronological order, which can be confusing.
Fallback
If you simply have to have your window-event-raising, javascript-execution-blocking, one-at-a-time, boring alerts, then you could also provide a fallback like so:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | window.old_alert = window.alert; window.alert = function(message, fallback){ if(fallback) { old_alert(message); return; } $(document.createElement('div')) .attr({title: 'Alert', 'class': 'alert'}) .html(message) .dialog({ buttons: {OK: function(){$(this).dialog('close');}}, close: function(){$(this).remove();}, draggable: true, modal: true, resizable: false, width: 'auto' }); }; |
Then use like so:
1 2 3 4 5 6 7 | // New Alert alert('This is a <strong>new</strong> alert!'); // Old Alert: alert('This is an old, boring alert.', true); // Or: old_alert('This is an old, boring alert.'); |
Conclusion
As long as the caveats aren't a problem for you (hint: they shouldn't be in a well-designed web application) or the fallback works for you, enjoy your snazzy new alerts!
