多部分形式的叠加块答案

【问题标题】：Overlay blocks in a multi-part form多部分形式的叠加块
【发布时间】：2009-11-24 05:50:14
【问题描述】：

我有一个包含三个部分的表单，标记看起来像这样：

div.section1
 legend
 fieldset
 button.continue

div.section2
 legend
 fieldset
 button.continue

div.section3
 legend
 fieldset
 button.continue

我想在第 2 节和第 3 节上有一个白色的叠加层，这样当用户仍在第 1 节时，它们会显示为“已禁用”。完成第 1 节并单击“继续”后，会出现另一节。

非常感谢！

【问题讨论】：

标签： jquery forms overlay

【解决方案1】：

那就这样做吧:)

将每个 div 嵌套在一个“容器 div”中，z-index 为 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;
}

类似的东西:)

【讨论】：

如果您不想禁用旧部分，则不必禁用。
我在想也许 1) 确定每个块的高度 2) 在每个块的顶部添加一个不透明度的 div 3) 在活动时禁用图层？那个怎么样？我是如何在 jQuery 中做到这一点的？再次感谢。
在这种情况下，请阅读与您的确切问题相关的问题：stackoverflow.com/questions/1633773/… :)