Js show and hide function

Question

I know that out there are lots of scripts to show and hide content but none of them work for me when it comes to my scenario. Here on this test page http://bloghutsbeta.blogspot.com/2012/04/testing-game-content-issue.html I have flash game in iframe, IF you click on PLAY button or you don't click still the flash content starts loading in Chrome and IE (not in firefox).

So to deal with this situation I thought of using show and hide content method and used a few scripts but none of them helped as even though when I was using them the flash content still use to load at the back end in IE and Chrome. What I am asking for is a script that won't let the flash content load until an 'onclick' function is performed. I know one script that do this 'LazyLoad' But it is for images, I don't think it will work for flash content too.

Note: 1-There is Music on the link provided 2- Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps.

Relevant Markup: Button for lightbox or Modal Window

<a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a>

Content set to be display none until the above button is clicked (this actually doesn't work in IE and Chrome ONLY in firefox)

<div class="popup_block" id="popup_name">
<iframe width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html" frameborder="0" scrolling="no" allowTransparency="false"
></iframe>
</div>

CSS:

#fade { 
    display: none; 
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .80;
    z-index: 9999999;
}

.popup_block{
   width: 98.95%; height: 98.2%;
    display: none;
    padding: 0px;
    line-height:1em;
    font-size: 1em;
    position: fixed;
    top: 0px; left: 0px;
    z-index: 999999999;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.close {
    height:20px;
    float: right;
    margin: 0 2px 0 0;   
}

JS (actually Jquery)

<script type="text/javascript">
    $(document).ready(function(){

        //When you click on a link with class of poplight and the href starts with a # 
        $('a.poplight[href^=#]').click(function() {
            var popID = $(this).attr('rel'); //Get Popup Name
            var popURL = $(this).attr('href'); //Get Popup href to define size

            //Pull Query & Variables from href URL
            var query= popURL.split('?');
            var dim= query[1].split('&');
            var popWidth = dim[0].split('=')[1]; //Gets the first query string value

            //Fade in the Popup and add close button
            $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');

            //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
            var popMargTop = ($('#' + popID).height() + 0) / 0;
            var popMargLeft = ($('#' + popID).width() + 0) / 0;

            //Apply Margin to Popup
            $('#' + popID).css({ 
                'margin-top' : -popMargTop,
                'margin-left' : -popMargLeft
            });

            //Fade in Background
            $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
            $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

            return false;
        });


        //Close Popups and Fade Layer
        $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
            $('#fade , .popup_block').fadeOut(function() {
                $('#fade, a.close').remove();  
        }); //fade them both out

            return false;
        });


    });

    </script>

Answer 1

You should try something like this to load your frame right after button click:

$(document).ready(function(){
    $('a.poplight[href^=#]').click(function() {
        $('<iframe/>')
            .attr('frameborder', 0)
            .attr('allowTransparency', false)
            .attr('scrolling', 'no')
            .attr('width', '100%')
            .attr('height', '98%')
            .attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html')
            .appendTo('#popup_name');
    });
});

UPDATE: To remove frame when the popup is closed you can use this:

$('#popup_name .close').live('click', function() {
    $('#popup_name iframe').remove();
});