modal

Author: Yaron Nachshon

intro.js

@@ -136,8 +136,33 @@
         }
 
         function Modal(){
-          var that = this;
+          var element;
+          var content = '';
+          var changes = {
+            content: true
+          };
+
+          function createModal(){
+            var element = $('<div>').addClass('intro-modal').appendTo('body');
+            return element;
+          }
+          this.setContent = function(val){
+            content = val;
+            changes.content = true;
+          };
+
+          this.destroy = function(){
+            $(element).remove();
+            element = null;
+          };
 
+          this.render = function(){
+            element = element || createModal();
+            if(changes.content){
+              element.html(content);
+              changes.content = false;
+            }
+          };
         }
 
 
@@ -362,6 +387,9 @@
             });
           }
           hint.hideTooltip();
+          if(modal){
+            modal.destroy();
+          }
         }
 
 
@@ -382,6 +410,11 @@
               unhighlighElement(element);
             });
           }
+
+          if(modal){
+            modal.destroy();
+          }
+          modal = null;
           hint = null;
           backdrop = null;
         }
@@ -430,7 +463,9 @@
             if(!step.modal){
               return hint.render();
             }else{
-
+              modal = new Modal();
+              modal.setContent(intro);
+              modal.render();
               return jQuery.when();
             }
           };

introjs.min.css

@@ -83,19 +83,19 @@ $intro-backdrop-z-index: $intro-element-z-index - 100;
 
   .intro-tooltip-arrow {
     &[position=right] {
-      @include arrow( 'left', blue, $arrow-size-border);
+      @include arrow( 'left', #FFF, $arrow-size-border);
     }
 
     &[position=left] {
-      @include arrow( 'right', blue, $arrow-size-border);
+      @include arrow( 'right', #FFF, $arrow-size-border);
     }
 
     &[position=bottom] {
-      @include arrow( 'top', blue, $arrow-size-border);
+      @include arrow( 'top', #FFF, $arrow-size-border);
     }
 
     &[position=top] {
-      @include arrow( 'bottom', blue, $arrow-size-border);
+      @include arrow( 'bottom', #FFF, $arrow-size-border);
       top: 0;
     }
   }
@@ -149,3 +149,11 @@ $intro-backdrop-z-index: $intro-element-z-index - 100;
   opacity: 1.0 !important;
   transform: none !important;
 }
+
+.intro-modal{
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  top: 50%;
+  z-index: $intro-backdrop-z-index + 100;
+}