如何在点击按钮时在灯箱中打开 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

只需初始化针对 class 选择器 itakeover 的 fancybox，并将 type 设置为 iframe，如：

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

见JSFIDDLE

Answer 2

唯一的问题是带有 iframe 内容的模态 window 的纵横比。我使用 iframe-lightbox 可以轻松设置 16:9 4:3 或您需要的任何尺寸。

非常适合 YouTube / Vimeo / SoundCloud 或其他 URL 通过 iframe
可通过 data-padding-bottom 属性自定义纵横比
去抖启动，默认500ms，自定义速率可以设置为第二个参数
onload 事件成功后取消设置的预加载微调器

如何在点击按钮时在灯箱中打开 iframe

how to open an iframe in a lightbox on click of a button

html

css

iframe

fancybox