0

表示するコンテンツがまだあるのに、画面に表示されたときのColorBoxのサイズが小さすぎます。なぜ何かアイデアはありますか？

リンクは次のとおりです:(外部で機能すると思います...私に知らせない場合は...） http://rsatestamle.dminsite.com/

Webサイトを最初にロードすると、ボックスがポップアップします。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とjQuery1.8.2の最新バージョンを使用する

4

2 に答える 2

1

これは、ColorBoxがコンテンツを測定して使用する幅と高さを決定する前に、ロードされたマークアップのIMG要素のダウンロードが完全に完了していないことが原因である可能性があります。ColorBoxを2回開くと、画像がキャッシュされ、ドキュメント内で正しい幅と高さになります。これは、幅と高さの寸法をIMG要素に追加するか（推奨される方法）、CSSで画像の幅と高さを指定するスタイルを設定することで簡単に修正できます。

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

于 2013-02-22T07:55:31.653 に答える
0

スクロールバーを削除し、ポップアップにすべてのコンテンツを表示したいとのことですが、

私の提案

  1. CSSで#subscribe_popupの高さ/幅を増やすと役立つ場合があります

  2. CSSの#s​​ubscribe_popupに「overflow：hidden」を使用すると役立つ場合があります

それが役に立てば幸い。

于 2013-02-21T20:18:16.120 に答える