How do I prevent browser dialogs from blocking the UI timers

Question

I want to set a counter in html. By default browser dialogs like alert, on close warning etc prevent counter from executing. How do I prevent that? My code is some what like the snippet given below:

var count = 30;
var counter = setInterval(timer, 1000);

function timer() {
  count = count - 1;
  if (count <= 0) {
    clearInterval(counter);

    return;
  }

  document.getElementById("timer").innerHTML = count + " secs";
}
window.onbeforeunload = function() {
  return "I am blocking counter"
}

<span id="timer">...</span>
<button type="button" name="name" value="caption" onclick="alert('block this')">block counter</button>

jsfiddle

Answer 1

Javascript dialogs are always io blocking, the only way you have about this is to program your own dialogs.

So instead of popping up an io blocking alert box, you would pop up a div container which you position on top of your page.

You can't avoid the dialog for onbeforeunload though.