Js顯示和隱藏功能

Question

我知道有很多腳本可以顯示和隱藏內容，但當涉及到我的場景時，它們都不適用於我。 這裏在這個測試頁http://bloghutsbeta.blogspot.com/2012/04/testing-game-content-issue.html 我在iframe中有flash遊戲，如果你點擊PLAY按鈕或者你沒有點擊仍然flash內容開始加載在Chrome和IE（不在Firefox中）。

因此，爲了處理這種情況，我想到了使用show和hide內容方法並使用了幾個腳本，但沒有一個幫助，因爲即使當我使用它們時，Flash內容仍然用於在IE的後端加載和Chrome。 我要求的是一個腳本，它不會讓Flash內容加載，直到執行「onclick」功能。 我知道一個腳本可以做到這一點'LazyLoad'但它是用於圖像，我不認爲它也適用於Flash內容。

注意：1-在提供的鏈接上有音樂 2-對不起，提供blogspot鏈接，但JsFiddle不適用於以5KBps在阿富汗生活的人。

相關標記： 按鈕用於收藏夾或模態窗口

<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> 

內容設定爲顯示無直到上述按鈕被點擊（這實際上並不在IE和鉻工作只是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（實際上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

你應該嘗試這樣的事情按鈕點擊後立即加載您的框架：

$(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：要刪除幀時的彈出窗口關閉時，您可以使用此：

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