壊れたカラーボックスのサイズ変更アニメーション

Question

私はColorboxを使用してiframeコンテンツを表示します。いくつかのiframeは元のサイズ（幅と高さが設定されています）よりも大きいので、このソリューション（How can I dynamically resize the jQuery Colorbox plugin?）を使用して、ロード後にColorboxの高さを変更します。

問題は、Colorboxが小さくなると、ページの中央にきれいに伸びるのではなく、コンテンツの高さを下から上に伸ばしてしまうことです。私はあなたが写真付きのカラーボックスの例で見ることができるようにそれを正確に見せたい：http://jacklmoore.com/colorbox/example1/最初のリンク。親で

オープニングカラーボックス：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1 /jquery.min.js"></script> 
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $.extend($.colorbox.settings, {fastIframe:true, speed:350, transition:'elastic', scrolling:false, opacity:0.6, close:'Zavřít', overlayClose:false}); 
    $(".iframe").colorbox({iframe:true, width:'640px', height:'480px'}); 
    }); 
    </script> 

iframe内にサイズ変更：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     parent.$.colorbox.settings.overlayClose = true; 
     var y = $('#cbox').height() + $('#cbox').offset().top + 30; 
     parent.$.colorbox.resize({width:'644px', innerHeight:y}); 
    }); 
    </script> 

あなたは上記のコードですべての問題を参照していますか？答えをありがとう！

Answer 1

私は解決策を見つけました。

問題は、私がデフォルトのcolorbox.cssを編集しようとしたことでした。 そして、誤って削除しました：#cboxContent{background: #fff;}エラーが発生していない行がありません。