Fancybox内的fancybox设置高度
Fancybox内的fancybox设置高度
提问于 2013-02-15 15:12:20
我在主页上打电话给fancybox2。当fancybox iframe打开时，我在该页面中有一个链接，它将打开另一个fancybox iframe。现在的问题是：
- 当内容“较小”时，我无法让它移动到打开的页面的顶部(查看示例站点上的源代码)
- 当内容更大时，我不能设置高度以避免滚动条。
当我使用选择器(如: parent.$('.SELECTOR').fancybox({ ...in -即我的“第一个”fancybox页面将关闭)，而我需要打开该选项时，第二个" fancybox“将发送一些数据到”第一个“fancybox页面(表单所在的位置)，最后，当提交该表单时，它将全部传输到”主页“.
我知道这很难理解，但这里有一个例子：
http://wwiz.webatu.com/
那么如何动态地设置第一个"fancybox“的高度呢？
谢谢！
回答 1
Stack Overflow用户
发布于 2013-02-15 22:17:43
好吧，我算出来了，这是解决办法.更像是黑客..。但它适用于所有浏览器..。它所做的是:它实际上是掩码(因为我需要传递回调给它，所以没有删除它-> )，首先是iframe (删除阴影，内容甚至关闭按钮)，在关闭事件之后-它恢复第一个iframe :)
哦，还有额外的"post消息“内容，因为整个站点实际上是通过iframe (跨域的内容)加载的，这是在常规的iframe中工作的解决方案，它加载带有弹出窗口的fancybox1 .无论如何，解释起来太复杂了，任何寻求可行解决方案的人--给你：
$('.addmember').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
fitToView : false,
nextSpeed: 0, //important
prevSpeed: 0, //important
beforeShow: function(){
$_returnvalue = false;
this.width = ($('.fancybox-iframe').contents().find('#popup-add-member').width());
this.height = ($('.fancybox-iframe').contents().find('#popup-add-member').height());
var ifrchild = $('.fancybox-iframe').contents().find('#popup-add-member').height()+60;
parent.$('.fancybox-skin').attr('style', function(i,s) { return s + 'height: '+ifrchild+'px;' });
parent.$('.fancybox-inner').attr('style', function(i,s) { return s + 'height: '+ifrchild+'px;' });
$('.fancybox-wrap').attr('style', 'top: 15px !important;');
parent.$('.fancybox-close').addClass("fancynodisplay");
parent.$('.fancybox-overlay').addClass("fancybox-hidescroll");
$('.fancybox-overlay').addClass("fancybox-hideoverlay");
$('.fancybox-overlay').addClass("fancybox-hidescroll");
$('.fancybox-skin').addClass("fancybox-hideshadow");
parent.$('.fancybox-skin').addClass("fancybox-hideshadow");
parent.$('.fancybox-skin').addClass("fancybox-hideskin");
$('#hide-on-open').attr('style', 'display:none;');
},
afterShow: function(){
},
afterClose : function() {
$('#hide-on-open').attr('style', 'display:block;');
var ifrmain = $('#schedule-members').height();
parent.$('.fancybox-skin').attr('style', function(i,s) { return s + 'height: '+ifrmain+'px;' });
parent.$('.fancybox-inner').attr('style', function(i,s) { return s + 'height: '+ifrmain+'px;' });
parent.$('.fancybox-close').removeClass("fancynodisplay");
parent.$('.fancybox-overlay').removeClass("fancybox-hidescroll");
$('.fancybox-overlay').removeClass("fancybox-hidescroll");
parent.$('.fancybox-skin').removeClass("fancybox-hideskin");
if ($_returnvalue != false && $_returnvalue.response == "OK" )
{
// MY CALLBACK FUNCTIONS
}
window.top.postMessage($('#wrap').height()+80, 'myiframe');
},
onUpdate : { autoHeight: true},
beforeLoad : function() {
var ifrchild = $('.fancybox-iframe').contents().find('#popup-add-member').height()+60;
window.top.postMessage(ifrchild, 'myiframe');
},
helpers : {
overlay : {closeClick: false}
}
});和CSS来实现这一目标：
.fancybox-close.fancynodisplay {
height: 0px !important;
width: 0px !important;
display: none !important;}
.fancybox-overlay.fancybox-hidescroll {
overflow: hidden !important;
}
.fancybox-opened .fancybox-skin.fancybox-hideshadow {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow:none !important;}
.fancybox-hideskin {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0) !important;
position: relative !important;
text-shadow: none !important;
}
.fancybox-hideoverlay {
background: none;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14897621
复制相关文章
相似问题
腾讯云开发者
