Home/ Questions/Q 8618385
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:05:39+00:00

I have a a button that once clicked i show an overlay modal div

  • 0

I have a a button that once clicked i show an overlay modal div and within this div i embed an adsense code. The code is the following:

$('<div />').addClass('lightbox').appendTo('body').show();
    $('<div />').addClass('video_modal').appendTo('body').
                 css('top', '100px').css('left', $(window).width()/2-200+'px').
                 html('<div style="width:100%;height:225px;float:left"><script type="text/javascript"><!--\
        google_ad_client = "ca-pub-4677950456522449";\
        /* Cuadrado_Principal */\
        google_ad_slot = "9996968724";\
        google_ad_width = 300;\
        google_ad_height = 250;\
        //-->\
        </script>\
        <script type="text/javascript"\
        src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\
        </script>\
</div>\
                 <div class="preloader"></div>\
                 <div class="preloader_text"Searching...</div>').show();

The question is that preloader and it’s text is shown but not the adsense ad. What’s wrong in my code? I can not understand what’s happening.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My experience says that dynamically adding AdSense is…difficult. Perhaps Google doesn’t allow it and therefor it’s not working. My recommendation is creating a hidden div with the AdSense code and later upon whatever event you’re firing, with jQuery, move the contents of the hidden div to wherever you prefer.

    In this example I’ve added an ID to one of your divs called “googleadgoeshere”, and the hidden div is called “adsense”.

    <html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<p>Hello world</p>

<script type="text/javascript">
function showAd() {
    $('<div />').addClass('lightbox').appendTo('body').show();
    $('<div />').addClass('video_modal').appendTo('body').css('top', '100px').css('left', $(window).width()/2-200+'px').html('<div style="width:100%;height:225px;float:left" id="googleadgoeshere"></div>');
    $('<div />').addClass('preloader').appendTo('body').show();
    $('<div />').addClass('preloader_text').text('Searching...').appendTo('body').show();
    $('#adsense').show().appendTo('#googleadgoeshere');
}
</script>

<div id="adsense" style="display:none">
<script type="text/javascript">
<!--
google_ad_client = "ca-pub-4677950456522449";
/* Cuadrado_Principal */
google_ad_slot = "9996968724";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

<input type="button" value="Show ad" onclick="showAd()" />

</body>
</html>

    It works for me, let me know if you run in to any trouble!

    • 0