How to highlight bootstrap modal with intro.js

Question

I have a button, once I click on that button bootstrap modal will appear and then intro.js should highlight that modal. This is my requirement. But it's not working like that.

Once I click on that button modal is appearing but intro.js is not highlighting, if I press F12 it's highlighting.

This is the code I've written:

var introInstance=introJs();
introInstance.onbeforechange(function(targetObj) {
  switch(targetElementIndex){
    case 1:
      $('#productPlanDiv').modal();
      break;
  };
});

How can I fix this? Thanks.

Possible duplicate of [Intro.js style not appearing properly](https://stackoverflow.com/questions/25442269/intro-js-style-not-appearing-properly) — KaraKaplanKhan, Oct 26 '17 at 12:05

score 4 · Answer 1 · answered Oct 26 '17 at 11:49

The answer here and the answer @Victor gave could help you to solve this problem. But these two answers didn't solve my problem so I merged them.

But there are several issues for these answer to mention that I think is important;

As @Victor mentioned, introJs and DOM have to use same div. But you should use assing introJs to modal div only when you actually want to show modal. Let's think you have 4 steps and and 3rd and 4th steps show your modal's elements as follow:

HTML code:

<html>
<style>
    .modal { 
        z-index: 999999997 !important; 
    }
    .modal .introjs-fixedTooltip { 
        z-index: 99999998 !important; /*I give less value to this one. The other way introJs always blocks my modals*/
    }
    .modal .introjs-showElement { 
        z-index: 999999999 !important; 
        }
</style>

<body>
    <div id="some-div" data-step="1" data-intro="Let's do this!">
        <p>some meaningful workk</p>
    </div>
    <div id="some-other-div" data-step="2" data-intro="You can do it!">
        <p>this is very important text</p>
    </div>

    <div id="yourmodal" class="modal fade" role="dialog" aria-hidden="true">ü
        <form id="valuable-info" data-step="3" data-intro="use here to give info">
            important labels, textboxs, lists etc...
            <button id="click-here" data-step="4" data-intro="click here to click">
                click
            <button>
        </form> 
    </div>

    <button id="introJs-button">IntroJS</button>
</body>

JS code:

$('#introJs-button').on('click', function() {
    var intro = introJs();

    intro.onchange(function (targetElement){
        if (targetElement.attributes["data-step"].value === "3" && targetElement.attributes["data-step"].value === "4") {
            var closestContainer = $(targetElement).closest('div.modal').prop('id');
            $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('#' + closestContainer);
        }
        else {              
            $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer, .introjs-fixedTooltip').appendTo('body');
        }
    });
})

Like I tried to show in my JavaScript code, you should only append introJs to modal when your data-steps are defined at your modal's div. The other way, introJs will always tries to append itself to the closest container and when find nothing, it will cause error/bugs.

The other important thing I encounter is when you give your modal a high z-index value you should also give your modal's item such as select2-dropdownlist higher z-index value. Or you should reset modal's z-index value. Some of the items in select2-dropdownlist like select2-search__field, select2-results__options etc. will not understand what z-index value you give to modal. And because their z-index value will be lower than the modal itself these items never be shown on modal. My suggestion is resetting modal z-index value to prevent this.

score 0 · Answer 2 · answered Aug 21 '14 at 21:31

0

Since all JavaScript plugins in bootstrap require jQuery you can use an event listener to trigger it automatically when the modal is shown:

$('#my-modal').on('shown', function(){
  introJs().start();
});

answered Aug 21 '14 at 21:31

bazeblackwood

1,127
6
16

Actually what I explained will come after `intro` start. That means modal will come at `step no :1 ` that's why I am invoking modal at `case:1`. So I can't able to start `intro`. am I right – vasan Aug 21 '14 at 21:46

score 0 · Answer 3 · edited Nov 01 '17 at 19:02

None of the solutions on the web have fixed the problem for me.

But I came up with this solution:

/*fix interactions with modal BS3, take this on CSS file*/
.modal { z-index:999999997 !important; }
.modal .introjs-fixedTooltip { z-index: 999999998 !important; }
.modal .introjs-showElement { z-index: 999999999 !important; }


//Use this class and make sure that the modal has an ID
//introJs-Bs3-modal
//The introJs have a problem with DOM positioning and reading. It is mandatory for DIVs to work within the same element as modal.

$('.introJs-Bs3-modal').on('click', function() {
    var containerClosest = $(this).closest('div.modal').prop('id');
    setTimeout(function(){
        $('.introjs-overlay, .introjs-helperLayer, .introjs-tooltipReferenceLayer').appendTo('#'+containerClosest);
        }, 0);
});

How to highlight bootstrap modal with intro.js

3 Answers3