32

I'm developing a web app that utilises JavaScript alert() and confirm() dialogue boxes.

How can I stop Chrome from showing this checkbox?

Is there a setting I can modify?

I know I could modify the source code, but I'd like it so that Chrome could still auto-update.

I don't need to worry about other browsers since the app only runs in Chrome.

I have admin access to the (Windows) machines that run the app.

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134

6 Answers6

42

You can't. It's a browser feature there to prevent sites from showing hundreds of alerts to prevent you from leaving.

You can, however, look into modal popups like jQuery UI Dialog. These are javascript alert boxes that show a custom dialog. They don't use the default alert() function and therefore, bypass the issue you're running into completely.

I've found that an apps that has a lot of message boxes and confirms has a much better user experience if you use custom dialogs instead of the default alerts and confirms.

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
sachleen
  • 30,730
  • 8
  • 78
  • 73
  • 1
    I don't want to add a framework like jQuery. Also, there are a lot of `alert()` and `confirm()` boxes throughout the code. I don't want to reinvent the wheel, just to disable that checkbox. – Danny Beckett Jul 30 '12 at 21:30
  • 1
    @DannyBeckett there are pure JS modals out there, too. The JS can be really minimal, it's just to show/hide a div. The rest is CSS. You can override the default alert/confirm functions with your own so you don't have to change your code. – sachleen Jul 30 '12 at 21:33
  • 3
    By the way, you can easily override the existing alert function so all calls to `alert()` will use your custom modal popup instead of native. http://stackoverflow.com/questions/1729501/javascript-overriding-alert – sachleen Feb 13 '13 at 07:01
  • "You can't" is wrong. As I mentioned in the question, you could always modify the source code of Chrome. – Danny Beckett Mar 23 '14 at 09:21
  • 1
    @DannyBeckett so are you saying as a web dev I can modify the source code of Chrome used by my users? Cause if I can't...well then "You can't" – DeadlyChambers May 14 '14 at 16:30
  • 1
    @DeadlyChambers Read the question more thoroughly. – Danny Beckett May 14 '14 at 22:36
  • Fair enough...this is just such a frustrating issue. – DeadlyChambers May 14 '14 at 23:19
10

This is what I ended up doing, since we have a web app that has multiple users that are not under our control...(@DannyBeckett I know this isn't an exact answer to your question, but the people that are looking at your question might be helped by this.) You can at least detect if they are not seeing the dialogs. There are few things you most likely want to change like the time to display, or what you are actually displaying. Remember this will only notify the user that they are have managed to click that little checkbox.

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");
    }
}

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 confirms turned off");
    }
    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.

DeadlyChambers
  • 5,217
  • 4
  • 44
  • 61
  • @locateganesh It works by kind of high jacking the native confirm and alert. The 350 is milliseconds, and it is checking how long the confirm/alert is open. If it is open for longer than that it is assumed that alerts/confirms are NOT blocked. The "MySpecialDialog" is a a dialog box you have created that doesn't use the browser's native alert/confirms. So if you have a bootstrap modal or some such thing it will open that and notify the user. – DeadlyChambers Jan 29 '18 at 15:57
7

I know everybody is ethically against this, but I understand there are reasons of practical joking where this is desired. I think Chrome took a solid stance on this by enforcing a mandatory one second separation time between alert messages. This gives the visitor just enough time to close the page or refresh if they're stuck on an annoying prank site.

So to answer your question, it's all a matter of timing. If you alert more than once per second, Chrome will create that checkbox. Here's a simple example of a workaround:

var countdown = 99;
function annoy(){
    if(countdown>0){
        alert(countdown+" bottles of beer on the wall, "+countdown+" bottles of beer! Take one down, pass it around, "+(countdown-1)+" bottles of beer on the wall!");
        countdown--;

        // Time must always be 1000 milliseconds, 999 or less causes the checkbox to appear
        setTimeout(function(){
            annoy();
        }, 1000);
    }
}

// Don't alert right away or Chrome will catch you
setTimeout(function(){
    annoy();
}, 1000);
CauselessEffect
  • 415
  • 5
  • 11
  • Where did you find that it is a second or are you just guessing? – DeadlyChambers May 14 '14 at 16:26
  • 3
    It would appear that mozilla is using a 3 second span. https://bugzilla.mozilla.org/show_bug.cgi?id=61098#c209 – DeadlyChambers May 14 '14 at 16:44
  • Thanks for the info, it's good to know FF is 3 seconds, I'd only tested this code in Chrome. I discovered Chrome's 1-second rule through some brief testing, you can test for yourself that any interval below 1000ms causes the checkbox to appear, so it's not just something I made up. They may very well change this in the future but for now it's exactly 1 second. – CauselessEffect May 14 '14 at 20:48
3

You should better use jquery-confirm rather than trying to remove that checkbox.

$.confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to refund invoice ?',
    confirm: function(){
       //do something 
    },
    cancel: function(){
       //do something
    }
}); 
vvvvvvvvvv
  • 55
  • 6
-1

You should let the user do that if they want (and you can't stop them anyway).

Your problem is that you need to know that they have and then assume that they mean OK, not cancel. Replace confirm(x) with myConfirm(x):

function myConfirm(message) {
    var start = Number(new Date());
    var result = confirm(message);
    var end = Number(new Date());
    return (end<(start+10)||result==true);
}
Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
Ian
  • 21
  • This doesn't work. The checkbox is still shown: http://i.imgur.com/WRMeDHj.png - here's my fiddle: http://jsfiddle.net/x2N5E/ – Danny Beckett Mar 23 '14 at 09:06
-27
function alertWithoutNotice(message){
    setTimeout(function(){
        alert(message);
    }, 1000);
}
Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
Tomasz Mazur
  • 997
  • 7
  • 5
  • 5
    Any rationale or idea why this might help, or any explanation, or at least a fiddle demonstrating it actually works? – John Dvorak Feb 07 '13 at 12:57
  • 2
    @DannyBeckett Honestly don't know why you marked this one as answered... There's no explanation and the code doesn't even work. The second alert gave me the option to prevent more dialogues. – sachleen Feb 13 '13 at 07:00
  • 2
    This is wrong... because it doesn't work at all. What browser did you use? – NinjaBoy Mar 05 '13 at 07:33
  • From memory, at the time, if you played with the timeout value (`1000`) for your machine, you could get Chrome to stop showing that checkbox. – Danny Beckett Mar 23 '14 at 09:04
  • @EAGER_STUDENT It isn't wrong. It worked perfectly in my implementation. I'm very happy Tomasz has kept it here! – Danny Beckett Mar 23 '14 at 09:15
  • I guess , if the dialog popups more than twice per second , the checkbox will appears. – duXing Sep 16 '14 at 09:35
  • this is also give prevent check box. – Satanand Tiwari Mar 09 '16 at 05:52
  • 1
    Here's a fiddle that shows that (for mysterious reasons) the function in the answer works: https://jsfiddle.net/em2hbavp/ – Nisarg Shah Jul 23 '17 at 09:43