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:

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