Наложение блоков в виде нескольких частей

Question

У меня есть форма с тремя разделами, разметка выглядит примерно так:

div.section1
 legend
 fieldset
 button.continue

div.section2
 legend
 fieldset
 button.continue

div.section3
 legend
 fieldset
 button.continue

Я хотел бы иметь белое наложение на секции 2 и 3, чтобы они отображались как "отключенные", когда пользователь все еще находится на секции 1. Когда вы закончите с секцией 1 и нажмете "Продолжить", появится другая секция.

Большое спасибо!

Answer 1

Тогда делай так:)

Вложите каждый div в "контейнерный div" с z-индексом, скажем, 100 и непрозрачностью 0,3;

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

Что-то вроде того:)