fancyBox弹出iframe页面控制宽度和高度的方法

内容摘要
fancyBox弹出iframe页面其实非常简单,这里简单说一下。主要说的问题是关于控制弹出的iframe页面高度的问题。
文章正文

fancyBox弹出iframe页面其实非常简单,这里简单说一下。主要说的问题是关于控制弹出的iframe页面高度的问题。

代码如下:

<script language="javascript" type="text/javascript" src="/styles/jquery-1.7.2.min.js" ></script>
<script language="javascript" type="text/javascript" src="/styles/fancyBox/jquery.fancybox.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $('.fancybox').fancybox({
  padding : 0,
  autoScale:true,
  width:350,
  height:180,
  openEffect: 'elastic'
 });
});
</script>

<a href="tanchu.html" class="fancybox fancybox.iframe"><img src="/images/btn_enroll_2.png" width="73" height="28" /></a>

看代码宽度已经在js的属性中设置过了,但是却发现高度的设置经常是无效的。

经过测试,发现在弹出的tanchu.html页面设置div宽度和高度能够解决这个问题:

tanchu.html代码

<div style="width:300px; height:180px; padding: 15px;" style="color:#000; background:#fff;">
内容
</div>

让fancybox设置的宽度高度和div一致就可以了。

<script type="text/javascript">BAIDU_CLB_fillSlot("160927");</script>
代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!