How to get an element above $ionicBackdrop?

Question

It seems a very z-index issue, but I am not able to get a solution. I am trying to get an element in ion-view to come above $ionicBackdrop.

Example Pen: http://codepen.io/ankitjain11/pen/grwZav

JS:

angular.module('myApp', ['ionic'])

  .controller('IonicBackdropCtrl', function($scope, $ionicBackdrop, $timeout) {

  $scope.show = function() {
    $scope.back = true;
    $ionicBackdrop.retain();
  };
  $scope.hide = function () {
        $scope.back = false;
    $ionicBackdrop.release();
  }

});

HTML:

  <body ng-controller="IonicBackdropCtrl">
    <ion-view>
      <ion-content>
        <button class="button" ng-click="show()">
          Show Backdrop
        </button>
        <button class="button" ng-click="hide()" ng-show="back">
          Hide Backdrop
        </button>
      </ion-content>
    </ion-view>
  </body>

Here, the Hide Backdrop button, would come over the backdrop. Once, the backdrop is visible.

Though, my implementation is not as straight forward as the Pen, but still would serve my purpose.

score 1 · Accepted Answer · answered Mar 15 '16 at 11:51

1

Here is a discussion about same problem. And there is workaround for what you want as described in this discussion. Make the buttons direct child of body and then z-index changing would work. Look here http://codepen.io/anon/pen/EKNvrZ

answered Mar 15 '16 at 11:51

Olga Akhmetova

490
1
6
19

1

any other solution when making buttons direct child of body is not an option? ): – Luiz Freneda Nov 01 '16 at 00:26
Sorry, I don't know other solution. – Olga Akhmetova Nov 03 '16 at 11:22

How to get an element above $ionicBackdrop?

1 Answers1

Linked