Question

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

有什么建议吗？

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

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

其中#modaldialog是封装<md-dialog>的div。

以下是一个示例小提示，展示了它的工作原理：https://plnkr.co/edit/r3Sd2Ti8pKn33A9DJ7R0

introjs打开并突出显示模态窗口md-dialog

1 个答案: