html - 单击按钮如何在灯箱中打开iframe

我想在按钮的onclick灯箱中打开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按钮上执行此操作。

最佳答案

只需初始化针对类选择器itakeover的fancybox，然后将type设置为iframe即可：

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

见JSFIDDLE