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 alt

Answer 1

You can easily mimic the synchronicity of regular js alerts using jQueryUI Dialog boxes. Simply use the events provided -- in this case, close, which is called when you close a dialog box:

<div id="dialog" title="Dialog Title">Dialog</div>
<div id="dialog2" title="Dialog Title">Another dialog</div>
$("#dialog").dialog({
    close: function(event, ui) {
        $("#dialog2").dialog();
    }
});

Now, when you close the first dialog, the second opens.

Answer 2

How about layering the alerts ?
They'll still appear all at once, but the user only sees the first, until she closes that, then the second appears (is revealed) and so forth.
- Could easily be acheaved by updating a "global" last-z-index variable..

Answer 3

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 4

DAlert jQuery UI Plugin Try this: andrewdex.github.io/dalert

Answer 5

a jquery alert:

  JQuery.fn.alert = function(message) {
     alert(message);
  };

example of using:

 $("#item1").alert("hello");

oh my god :D

the jquery is only a DOM framework. this not an other javascript! jquery is only some javascript lines. and not replacing javascript.

if you want to create a dialog box then i can suggest you to search for jquery plugin.

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

Answer 6

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