Any JQuery alert() replacement for JavaScript's native one?

Question

I would like to replace the native JavaScript alert() with my own, so that I would be able to control the theme and have it more JQueryUI look and feel. I've tried numerous alternatives - JQueryUI Dialog, jAlert, jqAlert. However, it appears that all of them not functioning synchronously in the same fashion like the original alert.

Example:

function mytest()
{
    alert('one');
    alert('two');
    alert('three');
}

In this example, with the original alert(), the 3 dialogs would appear one after the other in a row. But in the substitutes, they appear all at once!

Any idea?

Answer 1

The native alert() brings the browser to a dead halt. You will not find any third party libraries that do that, because it's not possible.*

---

Edit

I threw together a quick demo of how you can use a single jQuery dialog instead of an alert.

var alertManager = (function() {
    var _queue = [],
        _opts = {
            modal: true,
            autoOpen: false,
            buttons: {
                OK: function ()
                {
                    $(this).dialog('close');
                    var next = _queue.shift();
                    if (typeof next === 'string')
                    {
                        _dialog.text(next).dialog('open');
                    }
                }
            }
        },
        _dialog = $('<div id="alertDialog" title="Alert!"></div>').dialog(_opts),

        _self = {};

    _self.show = function (message) {
        if (_dialog.dialog('isOpen')) {
            _queue.push(String(message));
        }
        else {
            _dialog.text(message).dialog('open');
        }
    }

    return _self;
}());



$('#clicky').click(function ()
{
    alertManager.show('alert numero uno');
    alertManager.show('alert #2');
    alertManager.show({foo: 'bar'});
    alertManager.show(document.getElementById('clicky'));
    alertManager.show('last one');
});

Hot demo action over here →

You could also turn this into a jQuery plugin pretty easily.

---

_{*though you could fake it with a while loop that spins while the dialog is open. I do not recommend this.}

Answer 2

I found a library a long time ago that solved this problem for alert, prompt, and confirm, it is pretty easy to use:

Demo here: http://labs.abeautifulsite.net/archived/jquery-alerts/demo/

// Usage:
//      jAlert( message, [title, callback] )
//      jConfirm( message, [title, callback] )
//      jPrompt( message, [value, title, callback] )

download here: http://labs.abeautifulsite.net/archived/jquery-alerts/jquery.alerts-1.1.zip