如何在一個按鈕上點擊一個Lightbox來打開一個iframe

Question

我想在一個按鈕的燈箱中打開一個iframe。

我爲此使用了fancybox lightbox。但是，我無法整合所有這些。

這是我的代碼：

<div class="mx-header"> 
     <div class="mx-header-container"> 
      <a href="http://iradio.s.widget.ldrhub.com/releases/4/index.php?key=iradio&amp;url=http%3A%2F%2Fwww.iradio.ie%2F" title="itakeover" class="itakeover" target="_blank" >iTakeover</a> 
     </div> 
</div> 

，這是CSS

.itakeover{ 
position: relative; 
width: 80px; height: 20px; 
background: linear-gradient(to right, #ffc400 , #ff7600); 
color: white !important; 
font-weight: 400; 
font-size: 18px; 
padding: 9px 40px !important; 
top: 30px; 
left: 100px; 

}

，這是截圖到我的網頁。 http://uploadpie.com/R3n3P

我想在itakeover按鈕上這樣做。

Answer 1

只要初始化的fancybox靶向類選擇itakeover並設置type到iframe像：

jQuery(document).ready(function($) { 
    $(".itakeover").fancybox({ 
    // API options 
    type: "iframe" 
    }); // fancybox 
}); // ready 

參見JSFIDDLE

Answer 2

唯一的問題是有關iframe模式窗口的高寬比內容。我用iframe-lightbox很容易設置16：9 4：3或任何你需要的尺寸。

• 非常適合的YouTube/Vimeo的/的SoundCloud或經由IFRAME其他URL
經由
• 定製寬高比數據填充底部屬性
• 去抖發射，默認500ms的，定製速率可以被設置爲第二參數
• 預加載事件成功後未設置的微調器