2013-02-21 61 views
0

我的ColorBox在屏幕上显示时尺寸太小,即使仍有内容可供显示。任何想法为什么?ColorBox:Box尺寸太小,仍然有要显示的内容

Link是:(我认为它的工作原理外...如果不是让我知道...) http://rsatestamle.dminsite.com/

的对话框就会弹出来,当你第一次加载网站。 Cookie设置为30天后过期。

我只是需要盒子来实际显示其内容,而不是给我滚动条的两侧。我正在浏览CSS,而且我找不到那样做。

正如你可以在我的图片看到:

enter image description here

这只是显示在右侧的滚动条,而不是显示我的内容。对我来说没有多大意义。

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;} 

使用最新版本彩盒&的jQuery的1.8.2

回答

0

我知道你想摆脱的滚动条和想要在弹出窗口中显示所有内容。

我建议

  1. 增加CSS #subscribe_popup的高度/宽度可以使用帮助

  2. “溢出:隐藏” 为#subscribe_popup在CSS可以帮助

希望它有助于。

1

这可能是由于装载的标记IMG元素具有不完全 完成下载彩盒测量内容 之前确定的宽度和高度,它应该使用。第二次打开ColorBox 时,图像已被缓存,并将在文档中占用正确的 宽度和高度。 将宽度和高度尺寸添加到IMG元素(建议的 ),或者通过设置指定宽度 和CSS中图像高度的样式,可以很容易地修复此问题。

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

相关问题