Stop page execution like the alert() function

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, usi

Answer 1

You can use following code to pause execution for long period of time.

function PauseExcecution() {
//Do some stuff
sleep(1000);
//Do some stuff...

}

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Answer 2

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();.

Answer 3

It's not possible like the alert, but you can make things to look like an alert.

For example you make a function which calls functions. :) Then you make a function with a huge IF.

window.callfunction = function (f, a, b) /* function name, arguments, boolean*/
{
    var handler = window[f];
    if (typeof handler === 'function') {
        handler(a, b);
    } else {
        alert("No function like that mate, sry.");
    }
}

function deleteAfterConfirm(a, b) /* arguments, boolean */
{
    if (b == true) {
        alert("i can delete, confirmed.");
        alert(a);
        return false;
    }
    magicConfirm(a);
}

function magicConfirm(a) {
    /** 
        modals, popovers, etc, anything you want,
    **/
    $("#confirmModal").modal("show");
    /**
        and put the function's name to the binding element's data
    **/
    $("#returntrue").data("call", arguments.callee.caller.name);
    $("#returntrue").data("arguments", a);
    /** 
        the element like OK button in the alert 
        calls the magicConfirm function's caller function 
        with true, which is the deleteAfterConfirm, and 
        because the bool is true, it will alert i can delete... 
    **/
    $("#returntrue").bind("click", function () {
        callfunction($(this).data("call"), $(this).data("arguments"), true);
    });
}


$(document).ready(function () {
    $("#deleteAfterConfirm").on("click", function () {
        deleteAfterConfirm("variable which is needed later.");
    });
});

So now you can use the deleteAfterConfirm function like a function with alert() or confirm(), because it's recalling the other part if itself.

Not the best method, but this can somehow replace the confirms and alerts for a better looking version. This is a way of the fake alertism :)

Have fun - R

Answer 4

You can do it with Promise API. This is just about dividing your code and placing some lines in an action listener. Here is the sample code:

In this example, there are two buttons. Clicking first button starts a code and the rest of your code will be placed on promise.then function.

Html Code:

<body>
  <button id='startButton' onclick='start();'>Start Button</button>
  <button id='targetButton'>Target Button</button>
</body>

Script Code:

<script>
    function start(){
      console.log('first log'); //put your div displayer code here
      let promise = new Promise(function(resolve, reject) {
          console.log('promise started');
          let targetButton = document.getElementById('targetButton');
          targetButton.addEventListener("click",function(){
            resolve();
          });
      });
      promise.then(function() {
          console.log('second log'); //put the rest of your code
      });
    }
</script>

You will see first log and promise started just after triggering start button. second log will be displayed after you click the target button.

The resources for Promise API:

• MDN: Mozilla Developer Network
• MSDN: Microsoft Developer Network
• A very detailed tutorial

Answer 5

Use `Bootstap' modal

Then remove close button and disable model window hide by using below code

$('#myModal').modal({backdrop: 'static', keyboard: false})

Bind your function and close event to OK button of that modal window.

Answer 6

I think this is possible using basic JavaScript. You could have the fake button set like this:

<button id="fakeButton" value="not" onclick="fakeButtonValChange()">OK</button>

Then:

function fakeButtonValChange() {
var fakebuttonval = document.getElementById("fakeButton").value;
document.getElementById("fakebutton").value = 
"clicked"
if (fakebuttonval == "clicked") {
*place stuff to show div here (i'm not good with css and that stuff)*
}