Option to make the highlighted area unclickable
Closed this issue · 2 comments
nigelsim commented
I am using the exact versions of the following:
- Browser: Firefox 59
- AngularJS: 1.6.9
- Angular Bootstrap: 3.3.7
- Angular UI Tour: 0.9.2
I have installed this library via: yarn
I have observed the following behavior:
When a popup is shown it highlights the control being "toured", and I can click on that control.
This is how I expected it to behave:
I should not be able to click on the control because this will change the UI or start a process, which may not be fully intended.
Here is my tour config, and all related step configs:
var tourConfig = {};No special config in use, other than what is in the HTML
<div class="container-fluid dashboard-wrapper"
ui-tour="firstTour"
ui-tour-on-ready="$ctrl.onTourReady()"
ui-tour-placement="bottom"
ui-tour-on-backdrop-click="$ctrl.end()"
ui-tour-backdrop="true"
> <button class="btn btn-link btn-title-action pull-right" ng-click="$ctrl.newMission()"
tour-step
tour-step-title="Missions"
tour-step-content="Add a mission by clicking the + button."
tour-step-order="10"
tour-step-placement="bottom-right"
tour-step-backdrop="true"
><i class="fa-plus fa"></i></button>Additional notes/code:
We work around this currently using the following code:
<div class="container-fluid dashboard-wrapper"
ui-tour="firstTour"
ui-tour-on-ready="$ctrl.onTourReady()"
ui-tour-placement="bottom"
ui-tour-on-backdrop-click="$ctrl.end()"
ui-tour-backdrop="true"
ui-tour-on-show="unclickableBackdrop = true"
ui-tour-on-hidden="unclickableBackdrop = false"
>
<div ng-if="unclickableBackdrop" class="unclickable-backdrop"></div>
...
</div>.unclickable-backdrop {
z-index: 1000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}cluis13915 commented
Mi approach: The highlighted element has the class ui-tour-active-step, so you can disable it with CSS.
.ui-tour-active-step {
pointer-events: none;
}