introjs 打开和突出显示模态窗口 md-dialog答案

【问题标题】：introjs opening and highlighting modal window md-dialogintrojs 打开和突出显示模态窗口 md-dialog
【发布时间】：2018-04-29 06:39:19
【问题描述】：

我正在使用 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>

有什么建议吗？

【问题讨论】：

标签： angularjs json intro.js mddialog angularjs-material

【解决方案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) 中说明的“预渲染对话框”设置。这实质上意味着无论模式是否实际显示，您的对话框都存在于 DOM 中。你这样打开它：

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

#modaldialog 是一个 div，其中封装了您的 <md-dialog>。

这是一个演示如何工作的示例小提琴：https://plnkr.co/edit/r3Sd2Ti8pKn33A9DJ7R0

【讨论】：