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一致就可以了。