CODEWITHSUNDEEP
javascriptjquerypopup
Sébastien Richer
Sébastien Richer

Reputation: 1691

Trouble figuring out why my popup gets blocked

I've prepared this jsFiddle: http://jsfiddle.net/x9D4c/9/

Basically, a button with a fadeOut callback causes my popup to be blocked and the other without the fadeOut callback does not. What should / could I be doing differently?

Thanks for the help!

Below the code available in jsfiddle.

HTML:

<a href="#" id="anchor1">CauseBlock</a> - <a href="#" id="anchor2">Not Cause Block</a>

<div id="greenDiv" style="background-color: green;">green div</div>

JS:

// ################################################

function causeBlock() {
    causeBlockInsideFunction(function () {
        window.open("http://www.google.com/");
    });
}

function causeBlockInsideFunction(callback) {
    $("#greenDiv").fadeOut(function () {
        callback();
    });
}

// ################################################

function notCauseBlock() {
    notCauseBlockInsideFunction(function () {
        window.open("http://www.google.com/");
    });    
}

function notCauseBlockInsideFunction(callback) {
    // [...]
    callback();
}

// ################################################

$(document).ready(function() {
    $("#anchor1").click(function(e) {
        causeBlock();
    });
    $("#anchor2").click(function(e) {
        notCauseBlock();
    });
});

Upvotes: 2

Views: 177

Answers (1)

Yann
Yann

Reputation: 2231

The browser prevents the JS code from automatically opening popups. This prevents having pages that automatically open hundreds of windows. So, popup opening is restricted from function calls that were triggered directly by some user interaction (a click). If you use an animation, the callback is called from some kind of timer which falls in the "automatic" category.

Upvotes: 7

Related Questions