ionicLoading module backdrop on modal (doesnt disable clicks/input)

[ftorre104]

ionicLoading module does not disable background click/functionality on modal views; only on the primary view.

Here is an example of the problem:
http://codepen.io/ftorre/pen/GwqeI

For more info and a possible solution, see:
http://forum.ionicframework.com/t/ionicloading-overlay-doesnt-disable-background-buttons-on-modal/6355/3

[davidbeckham921]

I have the same issue.

[ftorre104]

I'm looking for the solution and think I am close.

In the forum, I proposed that putting the div between the head and body tag actually makes it work. I don't think this is best practice, but it works. I'm trying to edit the DOM creation line for the backdrop (ionic.bundle.js:37768) to see if I can get something working.
https://www.dropbox.com/s/wqgrkstg3c3maoy/Screenshot%202014-07-03%2010.41.46.png

However it doesnt seem to want to let me put a

element directly into the document.

[ftorre104]

Placing the backdrop div inside the modal-backdrop div also works.
https://www.dropbox.com/s/454e4pc8y8zyprs/Screenshot%202014-07-03%2012.35.30.png

I figured out a temporary workaround which is documented here:
http://forum.ionicframework.com/t/ionicloading-overlay-doesnt-disable-background-buttons-on-modal/6355/5

[perrygovier]

Hey @FTORRE, does that fix work for you?

[ftorre104]

No.. adding style "pointer-events: none;" to the body tag does not fix the modal backdrop issue.

I ended up doing this:

IonicModule
.directive('ionModal', [function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    template: '<div class="modal-backdrop">' +
                '<div class="backdrop" id="modal-backdrop-fix"></div>' + 
                '<div class="modal-wrapper" ng-transclude></div>' +
                '</div>'
  };
}]);

and then adding and removing the classes 'active' and 'visible'

 $document[0].getElementById('modal-backdrop-fix').classList.add('active')
 $document[0].getElementById('modal-backdrop-fix').classList.add('visible')

and

 $document[0].getElementById('modal-backdrop-fix').classList.remove('active')
 $document[0].getElementById('modal-backdrop-fix').classList.remove('visible')

in the loader.show and loader.hide functions, as such:
https://www.dropbox.com/s/7qgbh756umigalj/Screenshot%202014-07-03%2019.36.56.png

[jackyon]

I am also facing this issue recently, and I have be end up with this solution:

overwrite the loader css, for example:
.loading-container {width:68px;height:73px;left:50%;top:50%;margin-top:-34px;margin-left:-36.5px}

and bind the loader hide event when click the back button:
$ionicLoading.hide();

I think this will be easier and safe to use it.
(I don't want to touch the main core, so it will be always worked even after I upgrade to the new version of ionic.)