Question

When I write alert('Hello'), the page execution stops and waits for approval to continue.

I have a div setup to display as a fake alert, using HTML – this div has an ‘OK’ button.

I want the page to stop its execution (just like alert does) until the user click ‘OK’.

Is it possible ?

Answer 1

You can’t. Only the special built-ins can do that. For a while there was the showModalDialog special built-in that let you specify a URI for the content and thus customize it, but it was never widely supported and is now deprecated even by browsers that once supported it.

Instead, make your current alerting function that uses the div accept a callback for when the alert is closed (or return a promise that’s settled when it’s closed), to allow you to continue processing.

So for instance, if your code used to use alert and work like this:

function foo() {
    var x;

    x = doSomething();
    alert("Alert! Alert!");
    doSomethingAfterTheAlertIsCleared(x);
    doAnotherThingAfterward();
}

…you’d change it to:

function foo() {
    var x;

    x = doSomething();
    fakeAlert("Alert! Alert!", function() {
        doSomethingAfterTheAlertIsCleared(x);
        doAnotherThingAfterward();
    });
}

Note that now all the code that followed the alert is in a function, whose reference we pass into the fakeAlert. The foo function returns while the fake alert is still showing, but eventually the user dismisses the fake alert and our callback gets called. Note that our callback code has access to the locals in the call to foo that we were processing, because our callback is a closure (don’t worry if that’s a fairly new and/or mysterious term, closures are not complicated).

Of course, if the only thing following the alert is a single function call that doesn’t take any arguments, we could just pass that function reference directly. E.g., this:

function foo() {
    doSomething();
    alert("Alert! Alert!");
    doSomethingAfterTheAlertIsCleared();
}

becomes:

function foo() {
    doSomething();
    fakeAlert("Alert! Alert!", doSomethingAfterTheAlertIsCleared);
}

(Note that there are no () after doSomethingAfterTheAlertIsCleared — we’re referring to the function object, not calling the function; fakeAlert will call it.)

In case you’re not sure how fakeAlert would call the callback, it would be within the event handler for the user “closing” the alert div, and you just call the argument for the callback just like you do with any other reference to a function. So if fakeAlert receives it as callback, you call it by saying callback();.