CODEWITHSUNDEEP
javascriptjquery
Daniel Cheung
Daniel Cheung

Reputation: 4819

JS - Pause custom alert()

I've edited the default alert() function like this:

window.alert = function(str){
    //custom alert
}

Essentially, the new function will show an HTML <div> modal.

Backstory:

I want to answer to this question because I am having a problem. The alert is hidden and will show when the custom alert function is called. So the custom alert is basically showing the element and changing it's text. Therefore, when I have multiple alert() calls, only the last message is displayed! :(

But, unlike the default alert box. It of course won't pause the webpage until the alert goes away like the default alert() function.

Is it possible to imitate this "pause the webpage" behavior?

Also, is there another way other then using setTimeout() to check if isCustomAlertOpen == true to delay another custom alert from triggering until the current one is dismissed?

Edit:

Is there a way to queue up the custom alerts?

I don't mind jQuery, but I thought it might be overpowered here.

My question title is bad. Can someone think of a better title for me please?

Upvotes: 1

Views: 990

Answers (2)

Sebastien C.
Sebastien C.

Reputation: 4833

There is no way to block the execution because JavaScript is asynchronous (except obviously 3 modal functions and XmlHttpRequest).

For the same reason, you can't wait for a previous alert to be closed, but you can use events to create a stack of alerts using this pattern:

window.alert = (function() {
    var stack = [];

    var showNextAlert = function() {
        var div = document.createElement("div");
        /* Here, configure the div, show the string from stack[0] and add it to the document ... */
        var okButton = /* ... */;

        okButton.addEventListener("click", function() {
            div.parentNode.removeChild(div);

            stack = stack.slice(1);

            if(stack.length > 0) {
                showNextAlert();
            }
        });
    }

    return function(msg) {
        stack.push(msg);

        if(stack.length == 1) {
            // Show it immediately if the stack is empty
            showNextAlert();
        }
    };
})();

You should also use another name for this function instead of changing native properties (here window.alert).

Upvotes: 1

Chris Charles
Chris Charles

Reputation: 4446

Is it possible to imitate this "pause the webpage" behavior?

The answer to this is no. There are ways to block the ui (sync ajax call, long loop etc). But you wouldn't be able to stop these when the user has click the ok button.

A better approach would be to restructure the code so that it didn't run synchronously. Ie you wouldn't need to block the ui while waiting for the user.

Also, is there another way other then using setTimeout() to check if isCustomAlertOpen == true to delay another custom alert from triggering until the current one is dismissed?

One way to do this is: instead of setting a flag in one place and checking it repeatedly in another. You can use the concept of events. One part of code is waiting for an event to be triggered and another part triggers it. There is a library in jQuery which can do this for you or you could read up on it and write your own.

Upvotes: 1

Related Questions