Question

我有主页，我在调用fancybox2。当fancybox iframe打开时，我在该页面中有一个链接会打开另一个fancybox iframe。现在的问题是：

当内容为“较小”时，我无法将其移至已打开页面的顶部（请查看示例网站上的来源）
当内容较大时 - 我无法设置高度以避免滚动条。

当我使用选择器时： parent。$（'。SELECTOR'）。fancybox（{...在这种情况下我的“第一个”fancybox页面将关闭，我需要打开第二个“fancybox”将一些数据发送到“第一个”fancybox页面（其中）形式驻留）最后一旦提交该表格，它全部转移到“主页”...

我知道这很难理解，但这里有一个例子的链接：

http://wwiz.webatu.com/

那么如何动态设置第一个“fancybox”的高度？

谢谢！

Answer 1

好吧，我想出了这个，这里是解决方案....更像是黑客...但它适用于所有浏览器......而这是做什么的：它实际上是MASKS（不会删除它 - ＆gt;因为我需要将回调传递给它）首先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;
}

Fancybox里面的fancybox设置高度

1 个答案: