0

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

  1. 当内容“较小”时,我无法将其移至打开页面的顶部(查看示例站点上的源代码)

  2. 当内容较大时 - 我无法设置高度以避免滚动条。

当我使用如下选择器时: parent.$('.SELECTOR').fancybox({ ...在这种情况下,我的“第一个”fancybox 页面将关闭,我需要打开它,因为第二个“fancybox”会将一些数据发送到“第一个“fancybox 页面(表单所在的位置),最后一次,当提交该表单时,它全部转移到“主页”......

我知道这很难理解,但这里有一个示例链接:

http://wwiz.webatu.com/

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

谢谢 !

4

1 回答 1

0

好的,我想通了,这里是解决方案....更像是 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;
}  
于 2013-02-15T22:17:43.583 回答