Question

有人可以告诉我如何将下面创建的链接链接到CSS下面的iframe。我有点希望iframe成为一个几乎填满屏幕的弹出窗口，但似乎无法绕过所需的CSS！我想iframe需要先隐藏，但我真的需要帮助。谢谢大家的帮助

IFRAME

<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>

HTML

<a href="http://youtu.be/oHg5SJYRHA0" target="_blank" class="play clearfix proximaBold relative"><span class="cta floatL">through the eyes of a bigsmile advert</span><span class="playIco floatL"></span></a>

我试图在此处http://adayinbigdata.com/获得与我的大学品牌重塑评估相同的视频。

Answer 1

我将jquery用于与此非常类似的东西，它完美地运行。只需按一下.onclick按钮或任何你想要的iframe在点击时弹出，然后淡入iframe。

将iframe放在DOM的顶部，这样您就可以将它相对于视图屏幕放置，将父div放置到iframe，这样就可以使页面变灰，从而产生iframe位于页面顶部的错觉一个弹出窗口。

你只需把这一行

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

在头脑中。这连接到jquery库。然后将此代码放在文档中的任何位置。

<script type="text/javascript">
$(document).ready(function(){

  $('#vid_button').click (function(){
    $('#pop-up').fadeIn(1000);
  });

}); 
</script>

'#vid_button'是您希望视频在点击时弹出的按钮。 '#vid'是你想要弹出的实际视频。 .fadeIn旁边括号中的数字是iframe显示的毫秒数。因此完成此操作需要1秒钟。

这是一个jsfiddle：http://jsfiddle.net/42Kru/2/

Youtube链接，iframe和css使它看起来像弹出窗口

1 个答案: