Question

我使用Colorbox显示iframe内容。有些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;}没有该行导致错误。

Broken Colorbox调整动画大小

1 个答案: