How do I fire a modal for the next step in my introjs?

Question

So IntroJS works off of the data-intro and data-step attributes.

So for instance my logo looks like this:

<h1 id="logo" data-step="1" data-intro="Welcome to MyApp, where you can start creating an album for generations! Let us help you get started.">

But for step 3 it is on an element that when pressed, the next step should be on the modal that would appear if the element in Step 3 was pressed.

I have this as my Step 4 which doesn't work:

<div class="popup" id="add-images-step-1" data-step="4" data-intro="GETS TO UPLOADING">

Right now, when you reach Step 3 and press next, it gives you an empty white box that is off-screen.

How do I get it to focus on that modal?

Answer 1

We can monitor changing of steps in introJs with method onchange() (monitor steps on onchange event). On entering step 4 we should show the modal, and on entering all other steps we should hide it (cause user can use non-linear navigation and e.g. can go from step 4 to step 1). Also we should hide modal on oncomplete and exit events.

startIntroButton.on('click', function() {
    var introJsStarted = introJs().start();
    // hiding modal on 'oncomplete' and 'exit' events
    introJsStarted
    .oncomplete(function() { $('#add-images-popup').hide();
    }).onexit(function(){ $('#add-images-popup').hide();
    }).onchange(function(targetElement) {
        // and show modal on Step 4
        if($(targetElement).attr("data-step") == 4) {
            $('#add-images-popup').show();
        }   
        // don't forget to hide modal on other steps
        if($(targetElement).attr("data-step") != 4) {
            $('#add-images-popup').hide();
        }
    });
});

You should place Step 4's data- attributes on the part of the modal which is actually for displaying popup window and not for hiding content of the page otherwise introJs would highlight all the window of your browser.

  <div id="add-images-popup" class="modal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" data-step="4" data-intro="GETS TO UPLOADING">
                <div class="modal-header">...

Intro of popup window would look this way:

Here is working fiddle