1

カラーボックス ポップアップ内に折りたたみ可能なコンテンツがあります。

幅を「自動」に設定すると、自動幅で機能しますが、自動高さはどうですか? たとえば、カラーボックスがポップアップすると、最初の画像に収まりますが、2 番目の折りたたみ可能な画像の画像をクリックすると、ウィンドウのサイズが変更されません。これは可能ですか？

HTML

<p><a class='inline' href="#inline_content"><img src="http://www.paycoservices.co.uk/images/find-scheme.png" alt="find your scheme" /></a></p>

<div style='display:none'>
        <div id='inline_content' style='padding:10px; background:#fff;'>
        <div class="two-step">
<a href="#"><img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="990" height="100"  class="show_hide" alt="3 steps" /></a>
</div>

<div class="slidingDiv">
<img src="http://www.paycoservices.co.uk/images/step1.png" width="60" height="58" class="show_hide" alt="step 1" />
<font color=white><strong><h3>I want my employment status to be:</h3></strong></font> <a href="#"  class="show_hide"></a>
<div id="question_1">
<a href="#"><img src="http://www.paycoservices.co.uk/images/umbrella-emp.png" style="margin-left:80px;" width="300" height="118" class="first_s"  alt="umbrella employee" />    </a>
<a href="#"><img src="http://www.paycoservices.co.uk/images/self-employed.png" style="margin-left:170px;" width="300"  height="118" class="second_s" alt="self employed" />   </a>
</div>
</div>
</div
</div>

JS

 $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none",  width:"75%", height:"75%"});
                $(".group4").colorbox({rel:'group4', slideshow:true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe:true, innerWidth:640,  innerHeight:390});
                $(".vimeo").colorbox({iframe:true, innerWidth:500,  innerHeight:409});
                $(".iframe").colorbox({iframe:true, width:"80%",  height:"80%"});
                $(".inline").colorbox({inline:true, width:"auto"});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to  open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started  to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has  displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has  begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has  completely closed'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none',  retinaImage:true, retinaUrl:true});

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00",  "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still  be here.");
                    return false;
                });
    });

    $(document).ready(function(){

        // at first hide divs
        $(".slidingDiv").hide();
        $(".slidingDiv2").hide(); 
        $(".slidingDiv3").hide();
        $(".slidingDiv4").hide();
        $(".slidingDiv5").hide();
        $(".slidingDiv6").hide();
        $(".slidingDiv7").hide();
        $(".slidingDiv8").hide();
        $(".slidingDiv9").hide();
        $(".slidingDiv10").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
    $('.first_s').live('click', function(){
       $(".slidingDiv2").slideToggle();
    })
    $('.second_s').live('click', function(){
        $(".slidingDiv3").slideToggle();
    })  
    $('.third_s').live('click', function(){
        $(".slidingDiv4").slideToggle();
    }) 
    $('.fourth_s').live('click', function(){
        $(".slidingDiv5").slideToggle();
    }) 
    $('.fifth_s').live('click', function(){
        $(".slidingDiv6").slideToggle();
    })  
    $('.sixth_s').live('click', function(){
        $(".slidingDiv7").slideToggle();
    })  
    $('.seventh_s').live('click', function(){
        $(".slidingDiv8").slideToggle();
    })   
    $('.eighth_s').live('click', function(){
       $(".slidingDiv9").slideToggle();
    })   
    $('.ninth_s').live('click', function(){
        $(".slidingDiv10").slideToggle();
    }) 
    });

フィドル

4

1 に答える 1

0

この完全なソリューションを見てください。完全に機能します。=> フィドル (新)

ここでは、スクリプトが margin-top を調整してコンテンツを中央に配置します。

で複数のステップを表示し<a goToStep="2">...</a>たり<div step="2">...</div>、 で他の複数のステップを非表示にしたり<a closeStep="2">...</a>できます。これは非常に簡単に使用できます...すべてのことを同時に行うことができます<a goToStep="4,5" closeStep="1,3">...</a>

レスポンシブ カラーボックスの場合は、 maxWidth で実行できます。

$(".group1").colorbox({rel:'group1', maxWidth:'100%'});

すべてはフィドルにあります..

于 2013-07-11T15:53:40.217 に答える