3

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);
}
Michael W. Czechowski
  • 3,366
  • 2
  • 23
  • 50
David
  • 59
  • 2
  • 8

1 Answers1

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.

Michael W. Czechowski
  • 3,366
  • 2
  • 23
  • 50
  • 1
    it doesn't work for me 'introJs().setOption()' I think it only works in the latest version. But i used '$("#introjs-helperLayer").css("background-color","rgba(255,255,255,0.5)")' and it worked. But you helped take the step, I'll give up vote. thanks – David Sep 29 '19 at 16:30
  • Which version are you using? Maybe add this information to your question. Then I could check that specific version of introjs for how to set an option. – Michael W. Czechowski Sep 29 '19 at 16:47
  • i use version "v2.9.3", and not work! Is weird. in this version the overlayOpacity default is 0.9 – David Sep 29 '19 at 20:43
  • refering to [this](https://github.com/usablica/intro.js/issues/1414#issuecomment-962427013), it would not possible to change the options during runtime. – TefoD Mar 21 '22 at 09:51