introjs 打开和突出显示模式 window md-dialog

Question

我正在使用 introjs，我想知道是否有办法让它打开模态 window 并将其突出显示为导览的一部分。这在 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();
      };

至于我的模态 window，我使用的是调出 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>

有什么建议吗？

Answer 1

您可以使用 intro.js 中的 onbeforechange 事件（在此处记录：https://introjs.com/docs/intro/api/）在进入该步骤时打开模态，并在离开该步骤时关闭模态。

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

您必须小心，当您使用 setOptions 调用设置 introjs 对象时，您的步骤实际上存在于您的模板中。为此，您可以使用 md-dialog 演示 (https://material.angularjs.org/latest/demo/dialog) 中解释的 "Pre-rendered Dialog" 设置。这实质上意味着您的对话框存在于 DOM 中，无论模态是否实际显示。你这样打开它：

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

其中 #modaldialog 是一个 div 封装了你的 <md-dialog>.

这里有一个例子 fiddle 展示了它是如何工作的：https://plnkr.co/edit/r3Sd2Ti8pKn33A9DJ7R0

introjs 打开和突出显示模式 window md-dialog

introjs opening and highlighting modal window md-dialog

json

angularjs

intro.js

angularjs-material

mddialog