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

Question

So, IntroJS works with data-intro and data-step attributes.

So, for example, 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 the element that, when pressed, the next step should be on the modal one, which will appear if the element was pressed in step 3.

I have it like my Step 4 , which does not 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 click next , you will get an empty blank field that is off the screen.

How do I get him to focus on this modal?

Answer 1

We can control the change of steps in introJs using the onchange() method ( follow the steps in the onchange event ). When entering step 4, we must show the modality, and when entering all other steps, we must hide it (because the user can use non-linear navigation and, for example, can go from step 4 to step 1). We must also hide oncomplete and exit modal 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 must place the Step 4 data- on the side of the modality, which is actually intended to display the pop-up window, and not to hide the contents of the page, otherwise introJs will highlight all the windows 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">... 

Entering a popup will look like this:

The violin works here