好的,我想通了,这里是解决方案....更像是 hack...但它适用于所有浏览器...而且它的作用是:它实际上是 MASKS(不会删除它 -> 因为我需要通过回调它)第一个 iframe(删除阴影,内容甚至关闭按钮)和关闭事件之后 - 它恢复第一个 iframe :)
哦,还有额外的“发布消息”的东西,因为整个网站实际上是通过 iframe 加载的(跨域的东西),这是在常规 iframe 中工作的解决方案,它加载了 fancybox1,加载了 fancybox2 的弹出窗口......无论如何,解释起来太复杂了,以及任何寻求可行解决方案的人 - 给你:
$('.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;
}