labu77 labu77 - 3 months ago 28
jQuery Question

Show popup when adblock is active

I use this simple code to detect if adblock is active

<script>
(function(){
var test = document.createElement('div');
test.innerHTML = '&nbsp;';
test.className = 'adsbox';
document.body.appendChild(test);
window.setTimeout(function() {
if (test.offsetHeight === 0) {
alert("active");
} else {
alert("not active");
}
test.remove();
}, 100);
})();




This works fine so far.

Instead of display a alert message, I need a jquery popup. Therefore I changed the above code to:

<script>
(function(){
var test = document.createElement('div');
test.innerHTML = '&nbsp;';
test.className = 'adsbox';
document.body.appendChild(test);
window.setTimeout(function() {
if (test.offsetHeight === 0) {
showmessage();
}
test.remove();
}, 100);
})();
</script>


Without this function

showmessage();


works perfect.

When showmessage(); is inside this function, the popup doesnt come up. Instead the showmessage(); content is displayed on the website without css and not as a popup. I think this has something todo with the timeout function. But without this timeout, the detetection does not work in firefox.

Content from showmessage();

function showmessage(){
document.write("<div id=\"boxes\">");
document.write(" <div id=\"dialog\" class=\"window\">");
document.write(" <div style=\"display: none; opacity: 0.8;\" id=\"mask\">
<\/div>");
document.write("<\/div></div>");

setTimeout(
function() {
var id = '#dialog';

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
//$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(1000);

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
/*$('#mask').click(function () {
$(this).hide();
$('.window').hide();
}); */

}, 200);
}


Thank you very much

Answer

Use the prepend method to body and then set the popup HTML string into the method . :

function showmessage(){
        var jQueryPopupHTML = "<div id='boxes'><div id='dialog' class='window'> <div style='display: none;  opacity: 0.8;' id='mask'></div></div></div>"
        $( "body" ).prepend(jQueryPopupHTML);

    setTimeout(
    function() {
        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(500); 
        $('#mask').fadeTo("slow",0.9);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        //$(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(1000);     

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    /*$('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     */

    }, 200);
    }