ionicLoading overlay doesnt disable background buttons on modal

ionic-v1
1

Any idea on this? All input fields and buttons are clickable. This causes multiple submits if the user clicks submit multiple times… Kinda threw me off a lot.

2

May be a z-index issue…

Can you put a codepen together for this?
I can check it and open an issue for this.

3

Ok figured it out.
I played around with z-index but no good. Just puts the multiple displays (main screen, modal, loading) behind or infront.

Here’s the codepen showing the problem: http://codepen.io/anon/pen/rBCbF
In the mainview, while you show the loading module, you cannot increment the count.
If you open the modal, and then click loadData, it displays the loading module but does not disable the buttons. You can still click to increment on the modal. (Notice the main view is disabled).

It’s the order of the HTML structure that makes the change. I don’t know exactly why, but I can fix it in Chrome’s console.

PROBLEM:

Even though the loading opens from a modal view, the backdrop div where it currently is only blocks out the main view page (behind the modal).

SOLUTION:

Apparently moving the backdrop div above the body will cause the loading to disable both the main screen and the modal.

Any idea how to implement this change into the code…?

4

Hmm, I’d open an issue for this, and include the codepen too.

This would require modifying the directive, so it’s best to let the devs handle it

5

Temporary workaround

Edit ionic.bundle.js:42639(ish) file from

/*
 * We don't document the ionModal directive, we instead document
 * the $ionicModal service
 */
IonicModule
.directive('ionModal', [function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: '<div class="modal-backdrop">' +
                '<div class="modal-wrapper" ng-transclude></div>' +
                '</div>'
  };
}]);

to

    /*
 * We don't document the ionModal directive, we instead document
 * the $ionicModal service
 */
IonicModule
.directive('ionModal', [function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: '<div class="modal-backdrop">' +
                '<div class="backdrop" ng-class="{\'active visible\':showLoadingModal.active}"></div>' +
                '<div class="modal-wrapper" ng-transclude></div>' +
                '</div>'
  };
}]);

In your controller, instantiate a rootscope variable and define your showLoading/hideLoading functions as such:

$rootScope.showLoadingModal = {};
    $rootScope.showLoadingModal.active = false;
    // prelogin
    $scope.showLoading = function(text) {
        $ionicLoading.show({
            content: text,
            animation: 'fade-in'
        });
        $rootScope.showLoadingModal.active = true;

    };
    $scope.hideLoading = function() {
        $ionicLoading.hide();
        $rootScope.showLoadingModal.active = false;
    };

Now when you call

$scope.showLoading('<br><br><i class="ion-loading-b icon-xl"></i><br><br>Logging in...')

The root scope variable will go to true, and it will apply the ‘visible active’ class on your modal’s backdrop.
Likewise,

 $scope.hideLoading();

will then set the root scope variable to false, and it will unapply the ‘visible active’ class on your modal’s backdrop.

To clarify, I am using ** Ionic, v1.0.0-beta.4** but I believe this will work on the currently nightly build beta.8