【发布时间】:2013-10-29 23:55:56
【问题描述】:
我在同位素布局中的 div 中定位 iframe 时遇到问题。
编辑参见此处的示例:http://beektest.co/index_test.html(单击其中一个带有图像和文本的白色 div 以打开 iframe)
基本上,iframe 出现在 div 的中间,位于同位素元素的后面。
我已将 div 设置为高度 450,但是当 iframe 加载时,它似乎缩小到一半,并且 iframe 与 div 重叠。
关于如何强制 iframe 到 div 顶部并阻止它调整 div 大小的任何线索?
代码如下:
$("#container").append('<div id="item_'
+ v.id + '" class="item"><a href="http://site.co/guide/'
+ v.id + '--'
+ urltitle + '"><img id="img_'
+ v.id + '" src="http://cdn.site.co/'
+ v.thumbName + '" "width="200" height="200" /></a><p id="p_'
+ v.id + '" align="center">'
+ desc + '</p></div>');
$('#item_'
+ v.id + '').click(function(){
$(this).css('width','100%');
$('#img_'
+ v.id + '').css('visibility','hidden');
$('#p_'
+ v.id + '').css('visibility','hidden');
$(this).append('<iframe id="iframe" src="http://site.co/g'
+ v.id + '"></iframe>');
var $container = $('#container');
$container.isotope('reLayout');
setTimeout(function() {
var position = $('#item_'+ v.id + '').position();
scroll(0,position.top);
$container.isotope('reLayout');
},1000);
});
这里是 CSS
iframe
{
width: 100%;
height: 450px;
top: 0px;
left: 0px;
display: block;
border: 0;
height: 450px;
width: 100%;
position: absolute;
}
.item {
width: 200px;
border: 1px solid;
background-color: #FFFFFF;
margin-right:10px;
padding-right:10px;
padding-top:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: -webkit-gradient(linear, rgba(255,255,255,1) 0%,rgba(0,0,0,0.2) 100%);
z-index: 1001;
}
.large{
width: 600px;
height: 450px;
position: absolute;
}
【问题讨论】:
-
建议您在 jsfiddle.net 或 plunker 中创建一个演示,以便人们可以看到您的所有插件设置并在控制台中检查 css
-
在 Firefox 中对我来说一切都很好。...我多次调整窗口大小...不知道如何复制或确切地看哪里。你用的是什么浏览器?
-
抱歉,我还没有完成按钮。单击文本周围的白色 div 以展开并显示 iframe。
-
建议您设置更简单的演示,其中不包含视频...当我尝试使用控制台检查时,出现 swfobject 错误并且蓝色区域变为空白。仍然不确定我应该看什么。为内容添加一个大
<h2>I am iframe</h2>
标签: javascript jquery iframe jquery-isotope