Chrome blocks alert pop-up

Question

I have typical web application based on PHP, HTML, and javascript.

From an HTML page users can fire a javascript action that does some ajax interaction with the server. This javascript function happens to prompt several alert messages to require user confirmations.

When the second alert runs, the browser (Chrome version 18.0.1025.142 m) displays in the alert box a message and a checkbox where the user can "block other dialog windows from this page" (this is not the exact text as I have translated it from the Italian in my browser).

The user could tell the browser to block successive alerts, which is not good for my application.

Is there a way to prompt more several alerts, avoiding the feature for the user to block them?

Maybe should I use something else than alert, maybe a jQuery component? If I do that, which one is similar to alert?

Answer 1

I would highly advise jQuery's dialog as an alternative. It's not actually a physical pop-up, because it's really a floating div on the web page, so it can't be blocked. Another second great advantage is that it isn't embarrassing to look at.

Answer 2

Some browsers provide this feature for the alert() function because otherwise a malicious web developer could open endless alerts and prevent the user from leaving the page - remember Rick-rolling? There is no way to code around this, nor should there be (if you could code around this feature that would make it kind of pointless).

The alternative is to use html to implement a dialog that will display above the rest of the page, (usually) using a transparent (or semi-transparent) div to cover the whole page to prevent interaction with anything but the dialog elements. jQuery UI provides a dialog control that does this - have a look at the modal option.

Answer 3

I have came up with a way to detect if these are being blocked. You will have to do your own thing with the message you will be dispalying to the user.

window.nativeAlert = window.alert;
window.alert = function (message) {
var timeBefore = new Date();
var confirmBool = nativeAlert(message);
var timeAfter = new Date();
if ((timeAfter - timeBefore) < 350) {
    MySpecialDialog("You have alerts turned off, turn them back on or die!!!");
  }
}

window.nativeConfirm = window.confirm;
window.confirm = function (message) {
var timeBefore = new Date();
var confirmBool = nativeConfirm(message);
var timeAfter = new Date();
if ((timeAfter - timeBefore) < 350) {
    MySpecialDialog("You have alerts turned off, turn them back on or die!!!");
}
 return confirmBool;
}

Obviously I have set the time to 3.5 milliseconds. But after some testing we were only able to click or close the dialogs in about 5 milliseconds plus.