introJs with popup window

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://usablica.github.io/intro.js/intro.js?v=060"></script>
<div class="container">
<div class="panel panel-default">
  <div class="panel-body">
      <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.">Here is the logo text (Step 1)</h1>
      
      <div class='panel panel-default' data-step="2" data-intro="Step 2">
          <div class="panel-heading">
            <h3 class="panel-title">Step 2</h3>
          </div>
          <div class="panel-body">
            Description...
          </div>
      </div>
      
<input class='btn btn-default' data-step="3" data-intro="Press the button! (Step 3)" type='button' value='Show popup! (Step 3)' id='show-popup-button' />
      <input class='btn btn-default' type='button' id='start-intro-btn' value='Start Intro!' />
      
      <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">
                        <button type="button" id='close-modal-button' class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title">Add images popup...</h3>
                    </div>
                    <div class="modal-body text-center">
                        <h3>.................</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

CSS

body { margin: 20px; }
.introjs-helperNumberLayer {
    box-sizing: content-box;
}
.introjs-tooltip { left: 0px !important; }

/*  Intro CSS  */
.introjs-overlay {
  position: absolute;
  z-index: 999999;
  background-color: #000;
  opacity: 0;
  background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

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

.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  z-index: 9999999 !important;
}

.introjs-disableInteraction {
  z-index: 99999999 !important;
  position: absolute;
}

.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  position: relative;
}

.introjs-helperLayer {
  position: absolute;
  z-index: 9999998;
  background-color:...

JavaScript

var startIntroButton = $('#start-intro-btn');

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

var showPopupButton = $('#show-popup-button');
showPopupButton.on('click', function() {
   $('#add-images-popup').show(); 
});
var closePopupButton = $('#close-modal-button');
closePopupButton.on('click', function() {
   $('#add-images-popup').hide();  
});