0

3 つのセクションを持つフォームがあり、マークアップは次のようになります。

div.section1
 legend
 fieldset
 button.continue

div.section2
 legend
 fieldset
 button.continue

div.section3
 legend
 fieldset
 button.continue

セクション 2 と 3 に白いオーバーレイを表示して、ユーザーがまだセクション 1 にいるときに「無効」と表示されるようにしたいと思います。セクション 1 を終了して [続行] をクリックすると、他のセクションが表示されます。

どうもありがとう！

4

1 に答える 1

1

次に、それを行います:)

z-index が 100、不透明度が 0.3 の「コンテナ div」内に各 div をネストします。

//make all overlays opacity=0.3
$.each($("div.overlay"),function(i,val){ 
    $(this).css('opacity', 0.3);   
});

<div id="section1" class="overlay" style="z-index:100;" >
     <div id="YOURSECTION HERE"></div>
</div>
<div id="section2" class="overlay" style="z-index:100;" >
     <div id="YOURSECTION HERE"></div>
</div>
<div id="section3" class="overlay" style="z-index:100;" >
     <div id="YOURSECTION HERE"></div>
</div>

次に、続行ボタンのクリックイベントで特定のセクションを無効または有効にする関数を作成します-次のようなものです:

function ChangeOverlay(oldOverlayID,newOverlayID)
{
    //disable old section
    $("#" + oldOverlayID).css('z-index') = 100;
    $("#" + oldOverlayID).css('opacity') = 0.3;
    //enable new section
    $("#" + newOverlayID).css('z-index') = -1;
    $("#" + newOverlayID).css('opacity') = 1;
}

そんな感じ ：）

于 2009-11-24T07:05:28.363 に答える