Custom alert using Javascript

Question

How can I create a custom alert function in Javascript?

Answer 1

You can override the existing alert function, which exists on the window object:

window.alert = function (message) {
  // Do something with message
};

Answer 2

This is the solution I came up with. I wrote a generic function to create a jQueryUI dialog. If you wanted, you could override the default alert function using Matt's suggestion: window.alert = alert2;

// Generic self-contained jQueryUI alternative to
// the browser's default JavaScript alert method.
// The only prerequisite is to include jQuery & jQueryUI
// This method automatically creates/destroys the container div
// params:
//     message = message to display
//     title = the title to display on the alert
//     buttonText = the text to display on the button which closes the alert
function alert2(message, title, buttonText) {

    buttonText = (buttonText == undefined) ? "Ok" : buttonText;
    title = (title == undefined) ? "The page says:" : title;

    var div = $('<div>');
    div.html(message);
    div.attr('title', title);
    div.dialog({
        autoOpen: true,
        modal: true,
        draggable: false,
        resizable: false,
        buttons: [{
            text: buttonText,
            click: function () {
                $(this).dialog("close");
                div.remove();
            }
        }]
    });
}

Answer 3

If you're looking for a javascript/html/css replacement, I recommend checking out jQueryUI and its implementation of modal dialogs.

Answer 4

Technically you can change what the alert function does. But, you cannot change the title or other behavior of the modal window launched by the native alert function (besides the text/content).

Answer 5

"override" way is not good enough, suggest you to create a custom popup box. The best benefit of this solution is that you can control every details.