How to change 'overlayOpacity' just for one step with intro.js?

Question

I want to change the 'overlayOpacity' option to 0.5 for only one specific step. How can I realize this functionality and change that parameter back to the default value?

Examples, which do not work:

introJs().step2().setOption("overlayOpacity", 0.5);

if(introJs().step2()){
  introJs().setOption("overlayOpacity", 0.5);
}

Answer 1

The API documentation of intro.js is not super clear, but I found one example in the repository, that might give you an idea how to solve your problem:

1. Listen for the step changes
2. Check for _currentStep equals the desired step

introJs().onbeforechange(function() {
  if (this._currentStep === 1) {
    introJs().setOption("overlayOpacity", 0.5);
  } else {
    introJs().setOption("overlayOpacity", 0.8);
  }
});

Note: The default parameter of overlayOpacity is 0.8 and should be changed back, if the user left the desired step. And keep in mind, that this listener fires the callback function before the step change. Therefore we need currentStep === 1, instead of 2.