javascript - ColorBox:Box Sizing 太小，仍有内容要显示

Question

我的 ColorBox 在屏幕上显示时尺寸太小，即使它仍有内容可以显示。有什么想法吗？

链接是:(我认为它在外部有效...如果不让我知道...) http://rsatestamle.dminsite.com/

当您第一次加载网站时，该框会弹出。 cookie 设置为 30 天后过期。

我只需要框来实际显示其内容，而不是在两侧给我滚动条。我正在查看 CSS，但找不到任何这样做的东西。

正如你在我的图片中看到的:

它只是在右侧显示滚动条，而不是显示我的内容。对我来说意义不大。

HTML/JavaScript:

<script>

$("document").ready(function (){ 

   // load the overlay

    if (document.cookie.indexOf('visited=true') == -1) {
        var thirtyDays = 1000*60*60*24*30;
        var expires = new Date((new Date()).valueOf() + thirtyDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
        $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
    }

    $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});

 });


</script>

<!-- This contains the hidden content for inline calls for the subscribe box -->
<div style='display:none'>
  <div id='subscribe_popup' style='padding:10px;'>
    <div align="center" style="width:525px"><img src="http://www.amleo.com/images/art/Survey_ad.jpg" style="width:525px"/></div>
    <div align="center">Please enter your e-mail address below to sign up.</div>
    <!-- BEGIN #subs-container -->
    <div id="subs-container" class="clearfix">
      <!-- BEGIN .box-side -->
      <div>
            <form name="box-form" id="box-form" method="post" action="http://www.gliq.com/cgi-bin/subunsub" style="margin-top: -9px; margin-right:auto;margin-left:auto;width:177px;">
            <input name="email" size=20>
            <input type="hidden" name="acctname" value="amleo">
            <input type="hidden" name="action" value="subscribe">
            <input type="hidden" name="url" value="http://www.amleo.com/subscribesuccessful/a/47/">
            <input type="submit" value="Sign Up" style="margin-left:45px;">
        </form>
        <!-- END .box-side -->
      </div>
      <!-- BEGIN #subs-container -->
    </div>
  </div>
</div>
<!-- END subscribe popup-->

CSS:

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:visible;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.3 !important;}
#colorbox{
background-color:#333;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
        }

    #cboxTopLeft{width:14px; height:14px;}
    #cboxTopCenter{height:14px;}
    #cboxTopRight{width:14px; height:14px;}
    #cboxBottomLeft{width:14px; height:43px;}
    #cboxBottomCenter{height:43px;}
    #cboxBottomRight{width:14px; height:43px; }
    #cboxMiddleLeft{width:14px;}
    #cboxMiddleRight{width:14px;}
    #cboxContent{overflow:visible;}
    #cboxLoadedContent{margin-bottom:5px;}
    #cboxLoadingOverlay{background:url(http://www.amleo.com/images/art/boxloading_background.png) no-repeat center center;}
    #cboxLoadingGraphic{background:url(http://www.amleo.com/images/art/boxloading.gif) no-repeat center center;}
    #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
    #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}

    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://www.amleo.com/images/art/boxcontrols.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
    #cboxPrevious{left:0px; background-position: -51px -25px;}
    #cboxPrevious.hover{background-position:-51px 0px;}
    #cboxNext{left:27px; background-position:-75px -25px;}
    #cboxNext.hover{background-position:-75px 0px;}
    #cboxClose{right:0; background-position:-100px -25px; border:0;}
    #cboxClose.hover{background-position:-100px 0px;border:0;}

    .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
    .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
    .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
    .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

使用最新版本的 ColorBox & jQuery 1.8.2

Answer 1

This is likely due to IMG elements in the loaded markup having not fully finished downloading before ColorBox measures the content to determine the width and height it should use. The second time ColorBox is opened, the images have been cached and will take up the correct width and height within your document. This can easily be fixed by adding the width and height dimensions to the IMG element (a recommended practice), or by setting a style that specifies the width and height of the image in your CSS.

http://www.jacklmoore.com/colorbox/faq#faq-img