Javascript 具有不透明度和类似模态行为的向导

我正在接管别人的代码。。。 功能正常，我可以点击3个不同的div，编辑并动态保存。 现在需要一些类似向导的用户指导，用户将被引导完成3个不同的步骤

因此，我需要突出显示有问题的div，使其可编辑，而其余的都是禁用和不透明的-就像一个模态对话框。然而，需要有一个“跳过教程”链接，它完全跳过向导，允许用户自由编辑。“跳过教程”句柄让我困惑，因为它在突出显示的div之外，因此“模态”不再适用了

---

有人能帮我找到怎么做吗？使用jquery。多亏了

我做了不少研究，终于找到了一种方法，使用叠加div并手动为前景中需要的所有元素分配z索引。我真的不喜欢这个，因为它需要大量的手工工作，但它工作正常，所以很好：

if (step == 1) {
    var next = document.createElement("div");
    next.id = "nextBtn";
    next.style.cssText= "position:absolute; top:420px;left:885px;background-image:url('/images/nextStep.png');width:68px;height:40px;z-index:99;cursor:pointer";
    document.getElementsByTagName("body")[0].appendChild(next);

    var overlayDiv = document.createElement("div");
    overlayDiv.id = "overlayDiv";
    overlayDiv.style.cssText = "position:absolute; top:0; right:0; width:" +    screen.width + "px; height:" + screen.height + "px; background-color: #000000; opacity:0.5";
    document.getElementsByTagName("body")[0].appendChild(overlayDiv);

    var skipDiv = document.createElement("div");
    skipDiv.id = 'skipDiv';
    skipDiv.style.cssText = "position:absolute; top:80px; left: 1060px;background- image:url('/images/skipTutorial.png');width:148px;height:39px;cursor:pointer";
    document.getElementsByTagName("body")[0].appendChild(skipDiv);

    //more stuff
 } else if (step == 2) {
   //step2 stuff
 } else if (step ==3) {
   //step3 stuff
 }

---

请发布您当前拥有的相关脚本/html/css，突出显示您遇到困难的部分。如果你愿意，你甚至可以在jsFiddle.net上添加一把小提琴来玩玩。如果你解决了这个问题，请标记你的答案并关闭这个问题。