0

fancybox2 を呼び出しているメイン ページがあります。fancybox iframe が開くと、そのページ内に別の fancybox iframe を開くリンクがあります。今の問題は次のとおりです。

  1. コンテンツが「小さい」場合、開いたページの上部に移動できません（サンプルサイトのソースを見てください）

  2. コンテンツが大きい場合 - スクロールバーを避けるために高さを設定できません。

次のようなセレクターを使用すると:最初の「ファンシーボックスページ（フォームが存在する場所）、最後にそのフォームが送信されると、すべて「メインページ」に転送されます...

わかりにくいと思いますが、例のリンクを次に示します。

http://wwiz.webatu.com/

では、最初の「fancybox」の高さを動的に設定する方法は?

ありがとう ！

4

1 に答える 1

0

OK、私はこれを理解し、これが解決策です....ハックのように...しかし、それはすべてのブラウザで動作します...そして、これが何をするか：実際にはMASKS（削除しません->パスする必要があるためそれへのコールバック）最初のiframe（影の削除、コンテンツも閉じるボタン）およびcloseイベントの後-最初のiframeを復元します:)

ああ、サイト全体が実際に iframe (クロスドメインのもの) を介して読み込まれるため、追加の「投稿メッセージ」のものがあります。 、および実行可能な解決策を探している人 - ここに行きます:

        $('.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 に答える