intro.js for bootstrap modal Example (Done)

Created on 18 Jul 2014 · 10Comments · Source: usablica/intro.js

Does anyone have a working example for intro.js working with Bootstrap Modals?

Source

kouroshsalahshoor

Most helpful comment

FWIW and in case someone else runs into this. I was trying to show introjs for items _within_ a modal. The problem for me was that the modal has its own stacking context. As a result, I got to choose between having the modal in front of all the introjs stuff and the modal behind all the introjs stuff. Neither is ideal.

As a result, the solution was to call introJs('#modal').start(), which starts the introjs tutorial within the modal's stacking context. This allows the introjs overlay and helpers to interleave with the contents of the modal. This does not work very well if you want the whole modal as an item in your tutorial, and required one line of css:

.modal-backdrop { z-index: -10;}

colearendt on 26 Jun 2018

👍2

All 10 comments

We have created a working example for intro.js with Bootstrap Modal. Please see our example.
https://github.com/kourosh23/introjs-with-Bootstrap-Modal

I would like to thank following people:
1) Afshin Mehrabani for intro.js.
https://github.com/usablica/intro.js
2) Tweeter for Bootstrap.
http://getbootstrap.com/
3) Bootstrap-modal by jschr
http://jschr.github.io/bootstrap-modal/
and also
my friend, mentor and boss, Mr. Mohammad Koohestani, for all his help, feedback and guidance :)

kouroshsalahshoor on 3 Aug 2014

Ow, kourosh that's great. Mokhlesim :-)

afshinm on 24 Sep 2014

@kourosh23 what changes did you guys make to get this to work?

silentFred on 2 Jun 2016

👍2

Explain please!

brunocechet on 28 Jun 2016

I've got a fix for 1.1.1 and higher. I've posted on later issue https://github.com/usablica/intro.js/issues/485 this:

I've fixed it. I've added this to my css, and moves all modal elements at the end of the <body> and not in any child element, or else all you'll get strange positioning.

.introjs-fixParent.modal,
.introjs-fixParent.modal-dialog {
  position: relative !important;  
}

Fixed my modals with this:

$(document).ready(function(){
    $('div.modal').appendTo('body');
});

bytebrain on 29 Jul 2016

👍2

I tried this and succeeded
.introjs-fixParent {
z-index: 9999999 !important;
}

thaovi0308 on 18 Jan 2017

❤1

If you are using bootstrap modal, try this css:

.modal { z-index: 100000000000000000000 !important; }
.introjs-fixedTooltip { z-index: 200000000000000000000 !important; }

alessandromontividiu03 on 20 Jun 2017

👍1

None of these solutions worked for me.

try this...

on introjs.CSS

/*fix interactions with modal BS3*/
.modal { z-index:999999997 !important; }
.modal .introjs-fixedTooltip { z-index: 999999998 !important; }
.modal .introjs-showElement { z-index: 999999999 !important; }

on intro.js

//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);
});

victorrochadesigner on 31 Jul 2017

.modal-backdrop { z-index: -10;}

colearendt on 26 Jun 2018

👍2

FWIW and in case someone else runs into this. I was trying to show introjs for items _within_ a modal. The problem for me was that the modal has its own stacking context. As a result, I got to choose between having the modal in front of all the introjs stuff and the modal behind all the introjs stuff. Neither is ideal.

As a result, the solution was to call introJs('#modal').start(), which starts the introjs tutorial within the modal's stacking context. This allows the introjs overlay and helpers to interleave with the contents of the modal. This does not work very well if you want the whole modal as an item in your tutorial, and required one line of css:
.modal-backdrop { z-index: -10;}

I had to combine two solutions to get it working:

In your Javascript to call the IntroJS:

introJs('#modal-id').start();

And the change on CSS were:

.introjs-fixParent {
z-index: 9999999 !important;
opacity: 1.0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}`

Hope this helps.