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

[cc lang=’javascript’ ]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’
});
};[/cc]

And add a little bit of CSS to make it look nicer

[cc lang=’css’ ].alert
{
font-size: 1.3em;
padding: 1em;
text-align: center;
white-space: nowrap;
width: auto;
word-wrap: normal;
}[/cc]

Usage

Now, calling:

[cc lang=’javascript’ ]alert(‘This is a test of the new alert!’);[/cc]

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:

[cc lang=’javascript’ ]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’
});
};[/cc]

Then use like so:

[cc lang=’javascript’ ]// New Alert
alert(‘This is a new alert!’);

// Old Alert:
alert(‘This is an old, boring alert.’, true);
// Or:
old_alert(‘This is an old, boring alert.’);[/cc]

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!

Andrew

Programmer / Musician / Soccer Player

12 thoughts to “Override alert() With jQuery UI Dialog”

  1. Can do the same with confirm? it will me awesome!I have tried but it’s over me… Lots of thanks if any can help me..

  2. Hi Andrew, first of all, thanks a lot, is what i was looking for. Now, i change it to include title definition, hope be helpfull:
    /* since old alert has no title, if you send title as false, assumes old alert */

    window.old_alert = window.alert;

    window.alert = function(message, title){
    // if title is false, send old_alert
    if(title === false)
    {
    old_alert(message);
    return;
    }

    // set default value to title if undefined
    title = (typeof title === ‘undefined’) ? “Alert” : title;

    $(document.createElement(‘div’))
    .attr({title: title, ‘class’: ‘alert’})
    .html(message)
    .dialog({

    buttons: {OK: function(){$(this).dialog(‘close’);}},

    close: function(){$(this).remove();},

    draggable: true,

    modal: true,

    resizable: false,

    width: ‘auto’
    });
    };

  3. This is new alert is not stopping process. even before we click on Ok button in Alert box it is executing.

    Ex:

    $(document).ready(function () {
    $(‘#test’).click(function () {
    testAlter();
    });
    });
    function testAlter(){
    alert(‘This is a new alert!’);
    $(‘#test1’).text(‘Hello Mister java script is not stopping’+new Date());
    }

    in this example if user clicks on #test element then it has to show some alert then once user clicks on ok it should update the text #test1 element

  4. can u help me what’s wrong in following code?

    .alert
    {
    font-size: 1.3em;
    padding: 1em;
    text-align: center;
    white-space: nowrap;
    width: auto;
    word-wrap: normal;
    }

    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’
    });
    };

    $(document).ready(function(){
    $(“button”).click(function(){
    alert(“The paragraph is now hidden”);
    });
    });

    Hide
    This is a paragraph with little content.

Leave a Reply

Your email address will not be published. Required fields are marked *