当我的 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