introjs открытие и подсветка модального окна md-dialog

Я использую introjs и мне интересно, есть ли способ открыть модальное окно и выделить его как часть тура. Как это будет выглядеть в объекте JSON?

В настоящее время у меня есть кнопка, которая открывает тур по клику:

<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>

Шаги моего тура определены в объекте JSON в клиентском контроллере:

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

Что касается моего модального окна, я использую md-кнопку, которая вызывает диалоговое окно md:

<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>

Какие-либо предложения?


json angularjs angularjs-material intro.js mddialog
person Dave    schedule 15.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать событие onbeforechange в intro.js (задокументировано здесь: https://introjs.com/docs/intro/api/), чтобы открыть модальное окно при входе на этот шаг и закрыть модальное окно при выходе из него.

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

Вы должны быть осторожны, чтобы при настройке объекта introjs с помощью вызова setOptions ваш шаг действительно существовал в вашем шаблоне. Для этого вы можете использовать настройки «Предварительно визуализированного диалога», описанные в демонстрации md-dialog (https://material.angularjs.org/latest/demo/dialog). По сути, это означает, что ваш диалог существует в DOM независимо от того, отображается модальное окно или нет. Вы открываете это так:

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

где #modaldialog — это div, инкапсулирующий ваш <md-dialog>.

Вот пример скрипта, показывающий, как это может работать: https://plnkr.co/edit/r3Sd2Ti8pKn33A9DJ7R0

person james00794    schedule 16.11.2017