如何在一个按钮上点击一个Lightbox来打开一个iframe

我想在一个按钮的灯箱中打开一个iframe。如何在一个按钮上点击一个Lightbox来打开一个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按钮上这样做。

来源

2016-03-04 Nauman Tanwir

只要初始化的fancybox靶向类选择itakeover并设置type到iframe像：

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

参见JSFIDDLE

来源

2016-03-05 22:53:00 JFK

唯一的问题是有关iframe模式窗口的高宽比内容。我用iframe-lightbox很容易设置16：9 4：3或任何你需要的尺寸。

非常适合的YouTube/Vimeo的/的SoundCloud或经由IFRAME其他URL
定制宽高比数据填充底部属性
去抖发射，默认500ms的，定制速率可以被设置为第二参数
预加载事件成功后未设置的微调器

来源

2017-08-18 16:51:29 shimanskybiz

如何在一个按钮上点击一个Lightbox来打开一个iframe

回答

相关问题