introjs opening and highlighting modal window md-dialog

Question

I'm using introjs and am wondering if there's a way for it to open up a modal window and highlight it as part of the tour. How would that look in the JSON object?

Currently, I have a button that opens up the tour onclick:

<md-button class="md-accent md-raised" ng-click="startIntro();"><i class="fa fa-play-circle" aria-hidden="true"></i>&nbsp;Take a Tour</md-button>

My tour steps are defined in a JSON object in the client controller:

$scope.startIntro = function(){
        var intro = introJs();
          intro.setOptions({
            steps: [
              { 
                intro: "Welcome to your Portal!  Here's how to navigate through this site."
              },
              {
                element: document.querySelectorAll('#small-btn')[1],
                intro: "Take a minute and fill out your Questionnaire.  It will prepare you for your first day."
              },
              {
                element: '#twitter',
                intro: "Follow us on social media!",
                position: 'top'
              } 
            ]
          });
          intro.start();
      };

As for my modal window, I'm using a md-button that brings up a md-dialog box:

<md-button id="small-btn" class=" btn1" ng-click="showAdvanced($event)" >    
        <md-tooltip md-direction="right">Questionnaire</md-tooltip>
        <md-icon ng-if="!data.sysID" ng-style="{'background-color':'#F44336'}" class="circle-border md-60">assignment</md-icon>
        <md-icon ng-if="data.sysID" ng-style="{'background-color':'#4CAF50'}" class="circle-border md-60">assignment_turned_in</md-icon>
      </md-button>

Any suggestions?

james00794 · Accepted Answer · 2017-11-16T23:04:34.953

You can use onbeforechange event in intro.js (documented here: https://introjs.com/docs/intro/api/) to open the modal upon entering that step, and close the modal on leaving the step.

intro.onbeforechange(function(targetElement) {
  if (angular.element(targetElement).attr("id") === "step3") {
    $scope.openModal();
  }
  else {
    $scope.closeDialog();
  }
});

You have to be careful that when you setup the introjs object using the setOptions call that your step actually exists in your template. To achieve this, you can use the "Pre-rendered Dialog" settings explained on the md-dialog demo (https://material.angularjs.org/latest/demo/dialog). This essentially means that your dialog exists in the DOM whether the modal is actually showing or not. You open this like so:

$mdDialog.show({
  parent: angular.element(document.body);,
  targetEvent: $event,
  contentElement: "#modaldialog"
});

where #modaldialog is a div encapsulating your <md-dialog>.

Here is an example fiddle showing how this might work: https://plnkr.co/edit/r3Sd2Ti8pKn33A9DJ7R0

introjs opening and highlighting modal window md-dialog

1 Answers1