Question

I am taking over someone else’s code…
The functionality works, I can click in 3 different divs, edit them and save them on the fly.
Now there needs to be some wizard-like user guidance, in that a user would be led through the 3 different steps.

So I need to highlight the div in question, making it editable, while all the rest is disabled and opaque – like a modal dialog. Nevertheless there needs to be a “Skip tutorial” link which skips the wizard altogether allowing the user to edit freely. That “Skip tutorial” handle confuses me, as it is outside the highlighted div and thus “modal” doesn’t apply anymore?

Can someone help me find how to do this? Using jquery. Thanks

Answer 1

I did research quite a bit, and finally resorted for an approach in having an overlay div and manually assigning z-indexes to all the elements I need in the foreground. I do not really like this because it’s a lot of manual work, but it’s working so it’s fine:

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
 }