Possible to have backdrop constantly stay until tour end?

[claudchan]

Hi,
When set backdrop to true, is it possible to have backdrop constantly stay until tour end?

[memibeltrame]

+1 for this.

I solved this by having a div that covers the whole viewport and appears when the step is hidden and then goes away when the step is shown.

This is what I did:

1. Add a div to the HTML and give it an id and the tour-backdrop class:
   <div id="backdropFallback" class="tour-backdrop "></div>

2. Add the css to make it span over the whole viewport:
   #backdropFallback{ top:0; left:0; height: 100vh; width: 100vw; }

3. Add the handlers that deal with showing and hiding the fallback
   onHidden: function (tour) {$("#backdropFallback").removeClass("hide");},
onShown: function (tour) {$("#backdropFallback").addClass("hide");},
onEnd: function (tour) {$("#backdropFallback").addClass("hide");},

Hope that helps

[omidshapouri]

On version v0.10.3, backdrop stays on page until tour ends.
But after updating to newer version like v0.12.0, backdrop hides and appears between steps which is kind of annoying for users.
I hope it gets fixed in coming update

[ajfleming1]

+1 for this.

I solved this by having a div that covers the whole viewport and appears when the step is hidden and then goes away when the step is shown.

This is what I did:

1. Add a div to the HTML and give it an id and the tour-backdrop class:
   <div id="backdropFallback" class="tour-backdrop "></div>
2. Add the css to make it span over the whole viewport:
   #backdropFallback{ top:0; left:0; height: 100vh; width: 100vw; }
3. Add the handlers that deal with showing and hiding the fallback
   onHidden: function (tour) {$("#backdropFallback").removeClass("hide");},
onShown: function (tour) {$("#backdropFallback").addClass("hide");},
onEnd: function (tour) {$("#backdropFallback").addClass("hide");},

Hope that helps

Recommend the following so it can remain hidden for the times the javascript is not loaded / properly rendered.
<div id="backdropFallback" class="tour-backdrop hide "></div>