我下载了 colorbox jquery plugin 的最新版本。现在我为 iframe 和 inline 设置了 true colorbox。我的问题 colorbox(lightbox) 没有设置外部页面的自动高度/宽度。如何解决这个问题?有办法吗?
我的颜色框功能:
<script>
$(document).ready(function(){
$(".iframe").colorbox({inline:true,iframe:true});
</script>
谢谢
最佳答案
因为 colorbox 不知道 iframe 内部有什么,所以自动调整大小无法按您期望的方式工作。
我这样做:使用这些选项打开颜色框时设置默认宽度+高度:
{ iframe: true, innerWidth: 430, innerHeight: 370, scrolling: false, ... }
选择对您的内容最有意义的尺寸:colorbox 将打开并将 iframe 加载到此框中。 在 iframe html 正文的末尾,放置这个小脚本,该脚本可在 iframe 内调整颜色框的大小:
$(function(){
parent.$.colorbox.resize({
innerWidth:$('body').width(),
innerHeight:$('body').height()
});
});
要使第二个脚本正常工作,必须将 jQuery 加载到 iframe 内。否则,您必须使用 native JavaScript 来完成此任务。
并确保该 iframe 内的所有图像均已设置宽度/高度或已完全加载。否则innerWidth/innerHeight将给出不正确的值。
关于jQuery 和 Colorbox : How to automatically set the height and width of an iframe colorbox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10066938/