View Full Version : Lightbox loading content without being triggered

04-26-2012, 09:33 AM
I am using one simple lightbox or you can call it modal window. It doesn't load any flash content until you click on the button PLAY and when you click on close, it stops the flash game (it actually stops as when you click PLAY again the game starts from beginning)
BUT this is only about FIREFOX its not the behavior in CHROME, IE or Safari except MOZILLA FIREFOX all browser act in a complete different way which is opposite to the way I described above.

In chrome, IE, Safari maybe Opera the Flash content starts loading without being triggered (means if you don't click PLAY BUTTON still it loads) and even if you click on close button. Instead of stopping flash like in firefox the flash game continues to run (like being minimized instead of closed).

Why is this happening, How to resolve it, I am not able to understand this strange behavior?


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

width: 98.95%; height: 98.2%;
display: none;
padding: 0px;
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 {
float: right;
margin: 0 2px 0 0;


<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><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></td></tr>
<div class="popup_block" id="popup_name">
<div class="gamesharebuttons addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_button_more">Share</a></div>
<iframe id="myvideo" width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/Adventure/star%20island.html" frameborder="0" scrolling="no" allowTransparency="false"


&lt;script type=&quot;text/javascript&quot;&gt;

//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 &amp; Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&amp;');
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('&lt;a href=&quot;#&quot; title=&quot;Close It&quot; class=&quot;close&quot;&gt;&lt;img src=&quot;http://files.cryoffalcon.com/bloghuts/images/close%20button.png&quot; alt=&quot;Close&quot; width=&quot;20&quot; height=&quot;20&quot; /&gt;&lt;/a&gt;');

//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('&lt;div id=&quot;fade&quot;&gt;&lt;/div&gt;'); //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;



HERE IS LIVE DEMO PAGE http://bloghutsbeta.blogspot.com/2012/04/fullscreen-testing.html